首页修改主题修改
This commit is contained in:
XaoLi717
parent
e2027de458
commit
7b5ff3a63e
@ -1,189 +1,217 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="never" style="margin-bottom: 10px;height: 300px">
|
||||
<el-carousel :interval="4000" type="card" height="300px">
|
||||
<el-carousel-item v-for="item in filteredList" :key="item.imgId">
|
||||
<el-image style="width: 100%; height: 100%" :src="imgUrl+item.imgImg" alt="无图片" :title="item.imgName"/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-row class="mt-8px" :gutter="8" justify="space-between">
|
||||
<el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
|
||||
<el-card shadow="never" style="margin-bottom: 10px; margin-top: 10px">
|
||||
<el-row class="mt-8px" :gutter="8" justify="space-between" >
|
||||
<el-col :xl="7" :lg="7" :md="24" :sm="24" :xs="24">
|
||||
<el-card shadow="hover">
|
||||
<template #header >
|
||||
<div class="SystemThem" style="height: 2px;"></div>
|
||||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||||
<span style="display: inline-block;">要闻速递</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
target="_blank"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
更多>>
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row :gutter="16" justify="space-between">
|
||||
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<div class="flex items-center">
|
||||
<el-avatar :src="avatar" :size="70" class="mr-16px">
|
||||
<img src="@/assets/imgs/avatar.gif" alt="" />
|
||||
</el-avatar>
|
||||
<div>
|
||||
<div class="text-20px">
|
||||
{{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
|
||||
</div>
|
||||
<div class="mt-10px text-14px text-gray-500">
|
||||
{{ t('workplace.toady') }}，20℃ - 32℃！
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<div class="h-70px flex items-center justify-end lt-sm:mt-10px">
|
||||
<div class="px-8px text-right">
|
||||
<div class="mb-16px text-14px text-gray-400">{{ t('workplace.project') }}</div>
|
||||
<CountTo
|
||||
class="text-20px"
|
||||
:start-val="0"
|
||||
:end-val="totalSate.project"
|
||||
:duration="2600"
|
||||
/>
|
||||
</div>
|
||||
<el-divider direction="vertical" />
|
||||
<div class="px-8px text-right">
|
||||
<div class="mb-16px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
|
||||
<CountTo
|
||||
class="text-20px"
|
||||
:start-val="0"
|
||||
:end-val="totalSate.todo"
|
||||
:duration="2600"
|
||||
/>
|
||||
</div>
|
||||
<el-divider direction="vertical" border-style="dashed" />
|
||||
<div class="px-8px text-right">
|
||||
<div class="mb-16px text-14px text-gray-400">{{ t('workplace.access') }}</div>
|
||||
<CountTo
|
||||
class="text-20px"
|
||||
:start-val="0"
|
||||
:end-val="totalSate.access"
|
||||
:duration="2600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-card shadow="never" style="margin-bottom: 10px;height: 300px">
|
||||
<el-carousel :interval="4000" type="card" height="300px">
|
||||
<el-carousel-item v-for="item in filteredList" :key="item.imgId">
|
||||
<el-image style="width: 100%; height: 100%" :src="imgUrl+item.imgImg" alt="无图片" :title="item.imgName"/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-card>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<span v-if="filteredList[pageNo - 1]">{{filteredList[pageNo-1].imgName}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="h-3 flex justify-between">
|
||||
<span>数据统计</span>
|
||||
<el-card shadow="hover" class="mt-8px">
|
||||
<template #header >
|
||||
<div class="SystemThem" style="height: 2px;"></div>
|
||||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||||
<span style="display: inline-block;">要闻速递</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
target="_blank"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
更多>>
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton v-if="allData" :loading="loading" animated>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item, index) in dataList"
|
||||
v-for="(item,index) in todo"
|
||||
:key="`card-${index}`"
|
||||
:xl="8"
|
||||
:lg="8"
|
||||
:md="8"
|
||||
:sm="24"
|
||||
:xs="24"
|
||||
>
|
||||
<el-card shadow="hover" :style="{backgroundColor: item.color}" class="mr-5px mt-5px">
|
||||
<div class="flex items-center">
|
||||
<span class="text-20px">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="mt-12px text-16px text-gray-400">{{ item.infoCo2e }}</div>
|
||||
<div class="mt-12px flex justify-between text-12px text-gray-400">
|
||||
<span>{{ item.dAn }}</span>
|
||||
<span>{{ item.time }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="mt-8px">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row :gutter="20" justify="space-between">
|
||||
<el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-8px">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :options="pieOptionsData" :height="280" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-8px">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :options="barOptionsData" :height="280" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="h-3 flex justify-between">
|
||||
<span>未完成项目</span>
|
||||
<el-card shadow="hover" class="mt-8px">
|
||||
<template #header >
|
||||
<div class="SystemThem" style="height: 2px;"></div>
|
||||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||||
<span style="display: inline-block;">系统聚焦</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
target="_blank"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
更多>>
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<div class="flex items-center">
|
||||
<el-table
|
||||
:data="list2"
|
||||
:row-class-name="tableRowClassName"
|
||||
stripe
|
||||
style="width:100%"
|
||||
height="300"
|
||||
>
|
||||
<el-table-column
|
||||
fixed
|
||||
prop="pjEtime"
|
||||
label="预计日期"
|
||||
align="center"
|
||||
:formatter="dateFormatter2"
|
||||
style="width: 20%"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="pjName"
|
||||
label="标题"
|
||||
style="width: 30%"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="pjType"
|
||||
label="类别"
|
||||
style="width: 20%"
|
||||
>
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.HOME_PJ_TYPE || 'info'" :value="scope.row.pjType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="pjDept"
|
||||
label="部门"
|
||||
style="width: 20%">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.HOME_PJ_DEPT || 'info'" :value="scope.row.pjDept" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="pjNumber"
|
||||
label="人数"
|
||||
style="width: 10%"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-col
|
||||
v-for="(item,index) in todo"
|
||||
:key="`card-${index}`"
|
||||
>
|
||||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
|
||||
|
||||
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
|
||||
<el-card shadow="never" class="mt-8px" style="margin-bottom: 10px">
|
||||
<template #header>
|
||||
<div class="h-3 flex justify-between">
|
||||
<span>{{ t('workplace.notice') }}</span>
|
||||
<el-col :xl="11" :lg="11" :md="24" :sm="24" :xs="24" class="mb-8px">
|
||||
<el-card shadow="hover">
|
||||
<template #header >
|
||||
<div class="SystemThem" style="height: 2px;"></div>
|
||||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||||
<span style="display: inline-block;">事务</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
target="_blank"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
更多>>
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-tabs type="border-card" class="demo-tabs">
|
||||
<el-tab-pane label="待办">
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item,index) in todo"
|
||||
:key="`card-${index}`"
|
||||
>
|
||||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="待阅">
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item,index) in todo"
|
||||
:key="`card-${index}`"
|
||||
>
|
||||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="已办">
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item,index) in todo"
|
||||
:key="`card-${index}`"
|
||||
>
|
||||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="已阅">
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item,index) in todo"
|
||||
:key="`card-${index}`"
|
||||
>
|
||||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="mt-8px">
|
||||
<template #header >
|
||||
<div class="SystemThem" style="height: 2px;"></div>
|
||||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||||
<span style="display: inline-block;">报销单</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
target="_blank"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
更多>>
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item,index) in todo"
|
||||
:key="`card-${index}`"
|
||||
>
|
||||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="mt-8px">
|
||||
<template #header >
|
||||
<div class="SystemThem" style="height: 2px;"></div>
|
||||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||||
<span style="display: inline-block;">会议室管理</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
target="_blank"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
更多>>
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item,index) in todo"
|
||||
:key="`card-${index}`"
|
||||
>
|
||||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mb-8px">
|
||||
<el-card shadow="hover">
|
||||
<template #header >
|
||||
<div class="SystemThem" style="height: 2px;"></div>
|
||||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||||
<span style="display: inline-block;">新闻</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
target="_blank"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
更多>>
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
@ -191,10 +219,10 @@
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<div class="text-14px" @click="openDialog(item.contentType,item.imgId)">
|
||||
<dict-tag :type="DICT_TYPE.HOME_CONTENT_STATUS" :value="item.contentType" /> :
|
||||
{{ item.imgName }}
|
||||
<dict-tag :type="DICT_TYPE.HOME_CONTENT_STATUS" :value="item.contentType" /> :
|
||||
{{ item.imgName }}
|
||||
</div>
|
||||
<div class="mt-16px text-12px text-gray-400">
|
||||
<div class="text-12px text-gray-400">
|
||||
{{ formatTime(item.imgCreatetime, 'yyyy-MM-dd') }}
|
||||
</div>
|
||||
</div>
|
||||
@ -203,63 +231,71 @@
|
||||
</div>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<el-card shadow="never" style="margin-bottom: 10px">
|
||||
<template #header>
|
||||
<div class="h-3 flex justify-between">
|
||||
<span>完成项目</span>
|
||||
<el-card shadow="hover" class="mt-8px">
|
||||
<template #header >
|
||||
<div class="SystemThem" style="height: 2px;"></div>
|
||||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||||
<span style="display: inline-block;">邮件</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
target="_blank"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
更多>>
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<div class="flex items-center">
|
||||
<el-table
|
||||
:data="list2"
|
||||
:row-class-name="tableRowClassName2"
|
||||
stripe
|
||||
style="width:100%"
|
||||
height="300"
|
||||
><el-table-column
|
||||
fixed
|
||||
prop="pjEtime"
|
||||
label="完成日期"
|
||||
align="center"
|
||||
:formatter="dateFormatter2"
|
||||
style="width: 20%"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="pjName"
|
||||
label="标题"
|
||||
style="width: 30%"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="pjType"
|
||||
label="类别"
|
||||
style="width: 20%"
|
||||
>
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.HOME_PJ_TYPE || 'info'" :value="scope.row.pjType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="pjDept"
|
||||
label="部门"
|
||||
style="width: 20%">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.HOME_PJ_DEPT || 'info'" :value="scope.row.pjDept" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="pjNumber"
|
||||
label="人数"
|
||||
style="width: 10%"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-table stripe :data="tableData" border style="width: 100%" max-height="300">
|
||||
<el-table-column :formatter="dateFormatter2" prop="Date" label="时间" width="100" />
|
||||
<el-table-column prop="Name" label="发件人" width="70" />
|
||||
<el-table-column
|
||||
prop="Address"
|
||||
label="标题"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="mt-8px">
|
||||
<template #header >
|
||||
<div class="SystemThem" style="height: 2px;"></div>
|
||||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||||
<span style="display: inline-block;">日历</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
target="_blank"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
更多>>
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-calendar ref="calendar" class="custom-calendar">
|
||||
<template #header = "{date}">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<span style="display: inline-block;font-size: 10px">{{ date }}</span>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-button-group style="display: flex; justify-content: space-between;">
|
||||
<el-button size="small" @click="selectDate('prev-year')">上年</el-button>
|
||||
<el-button size="small" @click="selectDate('prev-month')">上月</el-button>
|
||||
<el-button size="small" @click="selectDate('today')">今天</el-button>
|
||||
<el-button size="small" @click="selectDate('next-year')">下年</el-button>
|
||||
<el-button size="small" @click="selectDate('next-month')">下月</el-button>
|
||||
</el-button-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 85%">
|
||||
@ -278,43 +314,103 @@
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { set } from 'lodash-es'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { formatTime } from '@/utils'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
|
||||
import { pieOptions, barOptions } from './echarts-data'
|
||||
import {DataInfoApi, DataInfoVO} from "@/api/home/datainfo";
|
||||
import {pjApi, pjVO} from "@/api/home/homepj";
|
||||
import type {Todo, Email} from './types'
|
||||
import {dateFormatter2} from "@/utils/formatTime";
|
||||
import {DICT_TYPE} from "@/utils/dict";
|
||||
import {imgApi, imgVO} from "@/api/home/homeimg";
|
||||
import {CalendarDateType, CalendarInstance} from "element-plus";
|
||||
|
||||
defineOptions({ name: 'Home' })
|
||||
|
||||
|
||||
const { t } = useI18n()
|
||||
const userStore = useUserStore()
|
||||
const loading = ref(false)
|
||||
const list = ref<DataInfoVO[]>([]) // 列表的数据
|
||||
const list2 = ref<pjVO[]>([]) // 列表的数据
|
||||
const list3 = ref<imgVO[]>([]) // 列表的数据
|
||||
const imgList = ref<imgVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const avatar = userStore.getUser.avatar
|
||||
const username = userStore.getUser.nickname
|
||||
const allData = ref(null);
|
||||
const allData2 = ref({});
|
||||
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
||||
// 获取统计数
|
||||
let totalSate = reactive<WorkplaceTotal>({
|
||||
project: 0,
|
||||
access: 0,
|
||||
todo: 0
|
||||
})
|
||||
|
||||
const pageNo = ref<number>(1)
|
||||
const calendar = ref<CalendarInstance>()
|
||||
const selectDate = (val: CalendarDateType) => {
|
||||
if (!calendar.value) return
|
||||
calendar.value.selectDate(val)
|
||||
}
|
||||
let tableData = reactive<Email[]>([])
|
||||
const getTableData = async () => {
|
||||
const data = [
|
||||
{
|
||||
Date:new Date(),
|
||||
Name:'张三',
|
||||
Address:'关于会议的审批关于会议的审批关于会议的',
|
||||
},
|
||||
{
|
||||
Date:new Date(),
|
||||
Name:'李四',
|
||||
Address:'关于会议的审批关于会议的审批关于会议的',
|
||||
},
|
||||
{
|
||||
Date:new Date(),
|
||||
Name:'王二',
|
||||
Address:'关于会议的审批关于会议的审批关于会议的',
|
||||
},
|
||||
{
|
||||
Date:new Date(),
|
||||
Name:'麻子',
|
||||
Address:'关于会议的审批关于会议的审批关于会议的',
|
||||
},
|
||||
{
|
||||
Date:new Date(),
|
||||
Name:'张三',
|
||||
Address:'关于会议的审批关于会议的审批关于会议的',
|
||||
},
|
||||
]
|
||||
tableData = Object.assign(tableData, data)
|
||||
}
|
||||
//获取待办已办信息
|
||||
let todo = reactive<Todo[]>([])
|
||||
const getTodo = async () => {
|
||||
const data = [
|
||||
{
|
||||
title: '集团政研会六届五次会员大会在贵州遵义召开',
|
||||
type: '请假',
|
||||
content: '',
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '总裁在“国际海运(中国)年会2010”发表主旨演讲',
|
||||
type: '任务',
|
||||
content: '',
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '(集团)总公司荣获《企业社会责任蓝皮书(2010)》卓越者企业',
|
||||
type: '出差',
|
||||
content: '',
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '总裁在“国际海运(中国)年会2010”发表主旨演讲',
|
||||
type: '会议',
|
||||
content: '需要你在某日某月开会',
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '集团政研会六届五次会员大会在贵州遵义召开',
|
||||
type: '会议',
|
||||
content: '需要你在某日某月开会',
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '(集团)总公司荣获《企业社会责任蓝皮书(2010)》卓越者企业',
|
||||
type: '会议',
|
||||
content: '需要你在某日某月开会',
|
||||
date: new Date()
|
||||
}
|
||||
]
|
||||
todo = Object.assign(todo, data)
|
||||
}
|
||||
const formData = ref({
|
||||
imgId: undefined,
|
||||
imgName: undefined,
|
||||
imgCreatetime: undefined,
|
||||
imgCreatetime: Date,
|
||||
imgImg: [],
|
||||
imgContent: undefined,
|
||||
contentType: undefined,
|
||||
@ -336,8 +432,8 @@ const resetForm = () => {
|
||||
formData.value = {
|
||||
imgId: undefined,
|
||||
imgName: undefined,
|
||||
imgCreatetime: undefined,
|
||||
imgImg: undefined,
|
||||
imgCreatetime: '',
|
||||
imgImg: [],
|
||||
imgContent: undefined,
|
||||
contentType: undefined,
|
||||
imgStatus: undefined,
|
||||
@ -345,27 +441,13 @@ const resetForm = () => {
|
||||
}
|
||||
}
|
||||
const filteredList = computed(() => {
|
||||
return list3.value.filter(item => item.imgStatus !== 0 && item.contentStatus!==0);
|
||||
return imgList.value.filter(item => item.imgStatus !== 0 && item.contentStatus!==0);
|
||||
});
|
||||
const filteredList2 = computed(() => {
|
||||
return list3.value.filter(item => item.contentStatus !== 0 );
|
||||
return imgList.value.filter(item => item.contentStatus !== 0 );
|
||||
});
|
||||
const queryParams2 = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
pjName: undefined,
|
||||
pjDone: undefined,
|
||||
pjDescribe: undefined,
|
||||
pjContent: undefined,
|
||||
pjType: undefined,
|
||||
pjEtime: [],
|
||||
pjVtime: [],
|
||||
pjDept: undefined,
|
||||
pjNumber: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
|
||||
const queryParams3 = reactive({
|
||||
const queryParamsImg = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
imgId: undefined,
|
||||
@ -378,268 +460,25 @@ const queryParams3 = reactive({
|
||||
contentStatus: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const tableRowClassName = ({ row }) => {
|
||||
return row.pjDone === 1 ? 'warning-row' : '';
|
||||
};
|
||||
const tableRowClassName2 = ({ row }) => {
|
||||
return row.pjDone === 0 ? 'warning-row' : '';
|
||||
};
|
||||
const imgUrl = "//images.weserv.nl/?url="
|
||||
const dataList = computed(() => {
|
||||
return [
|
||||
{ name: '碳排放', infoCo2e: allData.value.infoCo2e || 0, dAn: '吨', time: '2024-07-05', color: '#e6eae3' },
|
||||
{ name: '用水量', infoCo2e: allData.value.infoWater || 0, dAn: '吨', time: '2024-07-05', color: '#ecf5ff' },
|
||||
{ name: '环保投入', infoCo2e: allData.value.infoEcom || 0, dAn: '万元', time: '2024-07-05', color: '#f0f9eb' },
|
||||
{ name: '技能培训', infoCo2e: allData.value.infoTraining || 0, dAn: '人', time: '2024-07-05', color: '#fef0f0' },
|
||||
{ name: '污染物质', infoCo2e: allData.value.infoPollution || 0, dAn: '吨', time: '2024-07-05', color: '#c0c4cc' },
|
||||
{ name: '研发费用', infoCo2e: allData.value.infoRd || 0, dAn: '万元', time: '2024-07-05', color: '#fdf6ec' }
|
||||
];
|
||||
});
|
||||
const dataList2 = computed(() => [
|
||||
{
|
||||
E: allData2.value[0]?.infoEnvironment || 70,
|
||||
S: allData2.value[0]?.infoSociety || 70,
|
||||
G: allData2.value[0]?.infoGovern || 70
|
||||
},
|
||||
{
|
||||
E: allData2.value[1]?.infoEnvironment || 70,
|
||||
S: allData2.value[1]?.infoSociety || 70,
|
||||
G: allData2.value[1]?.infoGovern || 70
|
||||
},
|
||||
{
|
||||
E: allData2.value[2]?.infoEnvironment || 70,
|
||||
S: allData2.value[2]?.infoSociety || 70,
|
||||
G: allData2.value[2]?.infoGovern || 70
|
||||
},
|
||||
]);
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await DataInfoApi.getDataInfoPage(queryParams)
|
||||
const data2 = await pjApi.getpjPage(queryParams2)
|
||||
const data3 = await imgApi.getimgPage(queryParams3)
|
||||
allData.value=data.list[0]
|
||||
allData2.value=data.list
|
||||
list.value = data.list
|
||||
list2.value = data2.list
|
||||
list3.value = data3.list
|
||||
total.value = data.total
|
||||
const imgData = await imgApi.getimgPage(queryParamsImg)
|
||||
imgList.value = imgData.list
|
||||
total.value = imgData.total
|
||||
|
||||
await getWeeklyUserActivity()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 3,
|
||||
infoYear: undefined,
|
||||
infoCo2e: undefined,
|
||||
infoWater: undefined,
|
||||
infoPollution: undefined,
|
||||
infoEcom: undefined,
|
||||
infoTraining: undefined,
|
||||
infoRd: undefined,
|
||||
infoEnvironment: undefined,
|
||||
infoSociety: undefined,
|
||||
infoGovern: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const getCount = async () => {
|
||||
const data = {
|
||||
project: 40,
|
||||
access: 2340,
|
||||
todo: 10
|
||||
}
|
||||
totalSate = Object.assign(totalSate, data)
|
||||
}
|
||||
|
||||
// 获取项目数
|
||||
let projects = reactive<Project[]>([])
|
||||
const getProject = async () => {
|
||||
const data = [
|
||||
{
|
||||
name: 'ruoyi-vue-pro',
|
||||
icon: 'akar-icons:github-fill',
|
||||
message: 'https://github.com/YunaiV/ruoyi-vue-pro',
|
||||
personal: 'Spring Boot 单体架构',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'yudao-ui-admin-vue3',
|
||||
icon: 'logos:vue',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-vue3',
|
||||
personal: 'Vue3 + element-plus',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'yudao-ui-admin-vben',
|
||||
icon: 'logos:vue',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-vben',
|
||||
personal: 'Vue3 + vben(antd)',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'yudao-cloud',
|
||||
icon: 'akar-icons:github',
|
||||
message: 'https://github.com/YunaiV/yudao-cloud',
|
||||
personal: 'Spring Cloud 微服务架构',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'yudao-ui-mall-uniapp',
|
||||
icon: 'logos:vue',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-uniapp',
|
||||
personal: 'Vue3 + uniapp',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'yudao-ui-admin-vue2',
|
||||
icon: 'logos:vue',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-vue2',
|
||||
personal: 'Vue2 + element-ui',
|
||||
time: new Date()
|
||||
}
|
||||
]
|
||||
projects = Object.assign(projects, data)
|
||||
}
|
||||
|
||||
// 获取通知公告
|
||||
let notice = reactive<Notice[]>([])
|
||||
const getNotice = async () => {
|
||||
const data = [
|
||||
{
|
||||
title: '2024年4月7日，罗平县生态环境保护综合行政执法大队对你单位进行了调查，发现你单位实施了以下生态环境违法行为',
|
||||
// title: '系统支持 JDK 8/17/21，Vue 2/3',
|
||||
type: '通知',
|
||||
keys: ['通知'],
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '2024年4月7日，罗平县生态环境保护综合行政执法大队对你单位进行了调查，发现你单位实施了以下生态环境违法行为',
|
||||
// title: '后端提供 Spring Boot 2.7/3.2 + Cloud 双架构',
|
||||
type: '公告',
|
||||
keys: ['公告'],
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '2024年4月7日，罗平县生态环境保护综合行政执法大队对你单位进行了调查，发现你单位实施了以下生态环境违法行为',
|
||||
// title: '全部开源，个人与企业可 100% 直接使用，无需授权',
|
||||
type: '通知',
|
||||
keys: ['通知'],
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '2024年4月7日，罗平县生态环境保护综合行政执法大队对你单位进行了调查，发现你单位实施了以下生态环境违法行为',
|
||||
// title: '国内使用最广泛的快速开发平台，超 300+ 人贡献',
|
||||
type: '公告',
|
||||
keys: ['公告', '最广泛'],
|
||||
date: new Date()
|
||||
}
|
||||
]
|
||||
notice = Object.assign(notice, data)
|
||||
}
|
||||
|
||||
// 获取快捷入口
|
||||
let shortcut = reactive<Shortcut[]>([])
|
||||
|
||||
const getShortcut = async () => {
|
||||
const data = [
|
||||
{
|
||||
name: 'Github',
|
||||
icon: 'akar-icons:github-fill',
|
||||
url: 'github.io'
|
||||
},
|
||||
{
|
||||
name: 'Vue',
|
||||
icon: 'logos:vue',
|
||||
url: 'vuejs.org'
|
||||
},
|
||||
{
|
||||
name: 'Vite',
|
||||
icon: 'vscode-icons:file-type-vite',
|
||||
url: 'https://vitejs.dev/'
|
||||
},
|
||||
{
|
||||
name: 'Angular',
|
||||
icon: 'logos:angular-icon',
|
||||
url: 'github.io'
|
||||
},
|
||||
{
|
||||
name: 'React',
|
||||
icon: 'logos:react',
|
||||
url: 'github.io'
|
||||
},
|
||||
{
|
||||
name: 'Webpack',
|
||||
icon: 'logos:webpack',
|
||||
url: 'github.io'
|
||||
}
|
||||
]
|
||||
shortcut = Object.assign(shortcut, data)
|
||||
}
|
||||
|
||||
// 用户来源
|
||||
const getUserAccessSource = async () => {
|
||||
const data = [
|
||||
{ value: 335, name: '社会' },
|
||||
{ value: 310, name: '环境' },
|
||||
{ value: 234, name: '治理' },
|
||||
]
|
||||
set(
|
||||
pieOptionsData,
|
||||
'legend.data',
|
||||
data.map((v) => t(v.name))
|
||||
)
|
||||
pieOptionsData!.series![0].data = data.map((v) => {
|
||||
return {
|
||||
name: t(v.name),
|
||||
value: v.value
|
||||
}
|
||||
})
|
||||
}
|
||||
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
|
||||
|
||||
// 周活跃量
|
||||
const getWeeklyUserActivity = async () => {
|
||||
const data = [
|
||||
{ name: '环境评分' },
|
||||
{ name: '社会评分' },
|
||||
{ name: '治理评分' },
|
||||
]
|
||||
set(
|
||||
barOptionsData,
|
||||
'xAxis.data',
|
||||
data.map((v) => t(v.name))
|
||||
)
|
||||
set(barOptionsData, 'series', [
|
||||
{
|
||||
name: '2022',
|
||||
data: [dataList2.value[0].E, dataList2.value[0].E, dataList2.value[0].E],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '2023',
|
||||
data: [dataList2.value[1].S, dataList2.value[1].S, dataList2.value[1].S],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '2024',
|
||||
data: [dataList2.value[2].G, dataList2.value[2].G, dataList2.value[2].G],
|
||||
type: 'bar'
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
const getAllApi = async () => {
|
||||
await Promise.all([
|
||||
getCount(),
|
||||
getProject(),
|
||||
getNotice(),
|
||||
getShortcut(),
|
||||
getUserAccessSource(),
|
||||
getWeeklyUserActivity()
|
||||
getTableData(),
|
||||
getTodo(),
|
||||
])
|
||||
loading.value = false
|
||||
}
|
||||
@ -667,3 +506,21 @@ onMounted(() => {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.SystemThem {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
.custom-calendar {
|
||||
height: 310px; /* 根据需要调整高度 */
|
||||
}
|
||||
.custom-calendar .el-calendar-table__row {
|
||||
height: 40px; /* 设置行高度，根据需要调整 */
|
||||
}
|
||||
.custom-calendar .el-calendar-day {
|
||||
height: 100%; /* 设置每个日历单元格的高度为100% */
|
||||
display: flex; /* 使用 flexbox */
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,6 +4,17 @@ export type WorkplaceTotal = {
|
||||
todo: number
|
||||
}
|
||||
|
||||
export type Todo = {
|
||||
title: string
|
||||
type: string
|
||||
content: string
|
||||
data: Date | number | string
|
||||
}
|
||||
export type Email = {
|
||||
Date:Date | number | string
|
||||
Name:string
|
||||
Address:string
|
||||
}
|
||||
export type Project = {
|
||||
name: string
|
||||
icon: string
|
||||
|
||||
Loading…
Reference in New Issue
Block a user