|
|
@@ -5,6 +5,8 @@ import { IotRhDailyReportApi } from '@/api/pms/iotrhdailyreport'
|
|
|
import { useDebounceFn } from '@vueuse/core'
|
|
|
import CountTo from '@/components/count-to1.vue'
|
|
|
|
|
|
+import { Motion, AnimatePresence } from 'motion-v'
|
|
|
+
|
|
|
import { rangeShortcuts } from '@/utils/formatTime'
|
|
|
|
|
|
interface Query {
|
|
|
@@ -78,7 +80,8 @@ const getTotal = useDebounceFn(async () => {
|
|
|
let res1: any[]
|
|
|
if (query.value.createTime.length !== 0) {
|
|
|
res1 = await IotRhDailyReportApi.rhDailyReportStatistics({
|
|
|
- createTime: query.value.createTime
|
|
|
+ createTime: query.value.createTime,
|
|
|
+ deptId: query.value.deptId
|
|
|
})
|
|
|
|
|
|
totalWork.value.totalCount = res1[0].count
|
|
|
@@ -173,7 +176,43 @@ const getList = useDebounceFn(async () => {
|
|
|
}
|
|
|
}, 1000)
|
|
|
|
|
|
+const tab = ref<'表格' | '看板'>('表格')
|
|
|
+
|
|
|
+const currentTab = ref<'表格' | '看板'>('表格')
|
|
|
+
|
|
|
+const deptName = ref('瑞恒兴域')
|
|
|
+
|
|
|
+const direction = ref<'left' | 'right'>('right')
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => tab.value,
|
|
|
+ (val) => {
|
|
|
+ direction.value = val === '看板' ? 'right' : 'left'
|
|
|
+ nextTick(() => {
|
|
|
+ currentTab.value = val
|
|
|
+ })
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+const chartRef = ref<HTMLDivElement | null>(null)
|
|
|
+let chart: echarts.ECharts | null = null
|
|
|
+
|
|
|
+let chartLoading = ref(false)
|
|
|
+
|
|
|
+const getChart = useDebounceFn(async () => {
|
|
|
+ chartLoading.value = true
|
|
|
+
|
|
|
+ // try {
|
|
|
+ // const res =
|
|
|
+ // } finally {
|
|
|
+ // }
|
|
|
+}, 1000)
|
|
|
+
|
|
|
const handleDeptNodeClick = (node: any) => {
|
|
|
+ deptName.value = node.name
|
|
|
query.value.deptId = node.id
|
|
|
handleQuery()
|
|
|
}
|
|
|
@@ -213,7 +252,7 @@ onMounted(() => {
|
|
|
<div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4">
|
|
|
<DeptTree2 :deptId="id" @node-click="handleDeptNodeClick" />
|
|
|
</div>
|
|
|
- <div class="grid grid-rows-[62px_164px_1fr] h-full gap-5">
|
|
|
+ <div class="grid grid-rows-[62px_164px_1fr] h-full gap-4">
|
|
|
<el-form
|
|
|
size="default"
|
|
|
class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
|
|
|
@@ -260,7 +299,7 @@ onMounted(() => {
|
|
|
<div
|
|
|
v-for="info in totalWorkKeys"
|
|
|
:key="info[0]"
|
|
|
- class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4 flex flex-col items-center justify-center gap-2"
|
|
|
+ class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-1 flex flex-col items-center justify-center gap-1"
|
|
|
>
|
|
|
<div class="size-7.5" :class="info[3]"></div>
|
|
|
<count-to class="text-2xl font-medium" :start-val="0" :end-val="totalWork[info[0]]">
|
|
|
@@ -270,33 +309,84 @@ onMounted(() => {
|
|
|
<div class="text-sm font-medium text-[var(--el-text-color-regular)]">{{ info[2] }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow pt-4 px-8">
|
|
|
- <el-table
|
|
|
- v-loading="listLoading"
|
|
|
- :data="list"
|
|
|
- :stripe="true"
|
|
|
- :style="{ width: '100%' }"
|
|
|
- max-height="600"
|
|
|
- class="min-h-143"
|
|
|
- show-overflow-tooltip
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- v-for="item in columns(type)"
|
|
|
- :key="item.prop"
|
|
|
- :label="item.label"
|
|
|
- :prop="item.prop"
|
|
|
- align="center"
|
|
|
- :formatter="formatter"
|
|
|
- />
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <!-- <Pagination
|
|
|
+ <div
|
|
|
+ class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 py-4 grid grid-rows-[48px_1fr] gap-2"
|
|
|
+ >
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <el-button-group>
|
|
|
+ <el-button
|
|
|
+ size="default"
|
|
|
+ :type="tab === '表格' ? 'primary' : 'default'"
|
|
|
+ @click="tab = '表格'"
|
|
|
+ >表格
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="default"
|
|
|
+ :type="tab === '看板' ? 'primary' : 'default'"
|
|
|
+ @click="tab = '看板'"
|
|
|
+ >看板
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
|
|
|
+ <el-button size="default" type="primary">导出</el-button>
|
|
|
+ </div>
|
|
|
+ <el-auto-resizer>
|
|
|
+ <template #default="{ height, width }">
|
|
|
+ <Motion
|
|
|
+ as="div"
|
|
|
+ :style="{ position: 'relative', overflow: 'hidden' }"
|
|
|
+ :animate="{ height: `${height + 1}px`, width: `${width}px` }"
|
|
|
+ :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
|
|
|
+ >
|
|
|
+ <AnimatePresence :initial="false" mode="sync">
|
|
|
+ <Motion
|
|
|
+ :key="tab"
|
|
|
+ as="div"
|
|
|
+ :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
|
|
|
+ :animate="{ x: '0%', opacity: 1 }"
|
|
|
+ :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
|
|
|
+ :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
|
|
|
+ :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
|
|
|
+ >
|
|
|
+ <div :style="{ width: `${width}px`, height: `${height}px` }">
|
|
|
+ <el-table
|
|
|
+ v-if="currentTab === '表格'"
|
|
|
+ v-loading="listLoading"
|
|
|
+ :data="list"
|
|
|
+ :stripe="true"
|
|
|
+ :width="width"
|
|
|
+ :max-height="height"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in columns(type)"
|
|
|
+ :key="item.prop"
|
|
|
+ :label="item.label"
|
|
|
+ :prop="item.prop"
|
|
|
+ align="center"
|
|
|
+ :formatter="formatter"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ <div
|
|
|
+ ref="chartRef"
|
|
|
+ v-else
|
|
|
+ :style="{ width: `${width}px`, height: `${height}px` }"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Motion>
|
|
|
+ </AnimatePresence>
|
|
|
+ </Motion>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- <Pagination
|
|
|
class="mt-8"
|
|
|
:total="total"
|
|
|
v-model:page="query.pageNo"
|
|
|
v-model:limit="query.pageSize"
|
|
|
@pagination="getList"
|
|
|
/> -->
|
|
|
+ </el-auto-resizer>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -312,7 +402,7 @@ onMounted(() => {
|
|
|
border-top-left-radius: 8px;
|
|
|
|
|
|
.el-table__cell {
|
|
|
- height: 52px;
|
|
|
+ height: 40px;
|
|
|
}
|
|
|
|
|
|
.el-table__header-wrapper {
|
Zimo