首页大型更新,修正通信ui

This commit is contained in:
2024-12-30 16:44:53 +08:00
parent a23c049c7d
commit 28e379aa2a
26 changed files with 929 additions and 399 deletions

View File

@@ -1,269 +1,112 @@
<template>
<div class="app-container home">
<div style="display: flex;flex-flow:wrap;">
<div style="display: flex;flex-flow:row wrap;margin-right: 15px">
<div @click="goTarget('project/project')" class="work">
<el-badge class="item-ico" type="warning">
<i class="el-icon-s-operation fz cl1"></i>
<div size="small">项目管理</div>
</el-badge>
</div>
<div @click="goTarget('produce/attendance')" class="work">
<!-- :value="ownCount" -->
<el-badge class="item-ico" type="warning">
<i class="el-icon-date fz cl2"></i>
<div size="small">人员考勤</div>
</el-badge>
</div>
<div @click="goTarget('notice/notice')" class="work">
<el-badge class="item-ico" type="warning">
<i class="el-icon-chat-line-round fz cl3"></i>
<div size="small">通知公告</div>
</el-badge>
</div>
<div class="home">
<el-container style="height: 100vh;">
<el-main>
<el-row :gutter="20">
<!-- 右侧展示区域 -->
<el-col :span="18" class="content-area">
<announcements />
<financial-charts />
</el-col>
<div @click="goTarget('finance/costing')" class="work">
<el-badge class="item-ico" type="warning" v-on:click="goTarget('finance/costing')">
<i class="el-icon-set-up fz cl4"></i>
<div size="small">财务管理</div>
</el-badge>
</div>
</div>
<el-card class="box-card" style="width: 250px">
<div slot="header" class="clearfix">
<span><i class="el-icon-microphone"></i> 通知公告</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
</div>
<div v-for="(v, k) in noticeList" :key="k" class="text item" @click="toDrawer(v.noticeId)" type="primary" style="margin-left: 3px;margin-bottom: 5px;">
<span class="pull-right">{{ parseTime(v.createTime, '{y}-{m}-{d}') }}</span>
<i class="el-icon-arrow-right"></i>
{{v.noticeTitle}}
</div>
</el-card>
</div>
<!-- <div class="card-info" style="margin-top: 30px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span><i class="el-icon-monitor"></i> 系统基本信息</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div class="el-table el-table&#45;&#45;enable-row-hover el-table&#45;&#45;medium">
<table cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">端口</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">运行时间()</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
<td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
</tr>
</tbody>
</table>
</div>
</el-card>
</div>-->
<h2>新的一天从这里开始助力工作,让办公更轻松!!!</h2>
<el-drawer
:title="noticeTitle"
:visible.sync="drawer"
:with-header="true">
<div class="drawer-con">
<div v-html="noticeContent"></div>
</div>
</el-drawer>
<!-- 左侧功能区域 -->
<el-col :span="6" class="sidebar">
<quick-access />
<inventory />
<project-management />
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</template>
<script>
import { getCache } from "@/api/monitor/cache";
import {getFinishedCount, getOwnCount, getTodoListCount} from "@/api/oa/homeCount";
import {getNotice, listNoticeLimit} from "@/api/system/notice";
import { getFinishedCount, getOwnCount, getTodoListCount } from "@/api/oa/homeCount";
import { getNotice, listNoticeLimit } from "@/api/system/notice";
import QuickAccess from "../components/QuickAccess/index.vue";
import Inventory from "../components/Inventory/index.vue";
import Announcements from "../components/Announcements/index.vue";
import ProjectManagement from "../components/ProjectManagement/index.vue";
import FinancialCharts from "../components/FinancialCharts/index.vue";
export default {
name: "Index",
components: {
FinancialCharts,
ProjectManagement,
Announcements,
Inventory,
QuickAccess,
},
data() {
return {
// 版本号
version: "0.8.3",
// 统计命令信息
commandstats: null,
// 使用内存
usedmemory: null,
// cache信息
cache: [],
finishedCount: 0,
todoListCount: 0,
ownCount: 0,
noticeList:[],
noticeList: [],
noticeTitle: '',
noticeContent : '',
//抽屉
noticeContent: '',
drawer: false,
};
},
created() {
this.getList();
this.getListNotice()
this.getListNotice();
},
methods: {
/** 查缓存询信息 */
getList() {
getCache().then((response) => {
this.cache = response.data;
this.$modal.closeLoading();
});
},
/** 查询公告列表 */
getListNotice() {
this.loading = true;
listNoticeLimit().then(response => {
listNoticeLimit().then((response) => {
this.noticeList = response;
this.loading = false;
});
},
toDrawer(nid){
this.drawer = true
getNotice(nid).then(res => {
toDrawer(nid) {
this.drawer = true;
getNotice(nid).then((res) => {
this.noticeTitle = res.data.noticeTitle;
this.noticeContent = res.data.noticeContent;
})
},
/** 修改按钮操作 */
/* handleUpdate(row) {
this.reset();
const noticeId = row.noticeId || this.ids
getNotice(noticeId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改公告";
});
},*/
toNotice(nid){
console.log(2222,nid)
},
//路由跳转
goTarget(href) {
this.$router.push({ path: href});
console.log(999,href)
this.$router.push({path: href});
},
},
};
</script>
<style scoped lang="scss">
.home {
background-color: #f5f5f5;
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
/* 栅格列样式 */
.content-area {
background: #fff;
}
/* 左侧功能区域 */
.sidebar {
background: #f9f9f9;
}
.work {
background: #ffffff;
text-align: center;
}
.item-ico {
width: 100%;
height: 208px;
margin-top: 10px;
padding: 50px;
background-color: #ffffff;
font-size: 18px;
text-align: center;
color: #999999;
}
.item-ico .fz{font-size: 88px;margin-bottom: 12px;}
.item-ico .cl1{color: #67C23A}
.item-ico .cl2{color: #E6A23C}
.item-ico .cl3{color: #F56C6C}
.item-ico .cl4{color: #409EFF}
.box-card .el-card__header {
padding: 0;
border-bottom: 10px solid #EBEEF5;
box-sizing: border-box;
}
.clearfix{font-size: 18px;font-weight: 600;}
.text {
font-size: 16px;
border-bottom: #cccccc 1px dashed;
padding-bottom: 6px;
}
.item {
margin-bottom: 18px;
}
.item span{font-size: 12px;color: #cccccc}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
/* 响应式隐藏侧边栏 */
@media screen and (max-width: 768px) {
.sidebar {
display: none;
}
h2 {
margin-top: 30px;
font-size: 18px;
font-weight: 100;
.content-area {
width: 100% !important;
}
.drawer-con{padding:0 20px}
/* .card-info .item{
width: 100%;
height: 24px;
margin-top: 10px;
margin-right: 10px;
padding: 10px;
background-color: #ffffff;
font-size: 16px;
text-align: left;
color: #999999;
}*/
}
</style>

View File

@@ -300,7 +300,7 @@
<el-row :gutter="20">
<el-col :span="24">
<div class="tip-top">
<div style="display: flex;justify-content: space-between">
<div style="display: flex;justify-content: space-between">
<div style="display: flex;justify-content: center;align-items: center;white-space: nowrap">
<span> 日期检索</span>
<el-date-picker
@@ -425,10 +425,10 @@
<el-row :gutter="20">
<el-col :span="24">
<div class="tip-top">
<div style="display: flex;justify-content: space-between">
<div style="display: flex;justify-content: space-between">
<div style="display: flex;justify-content: center;align-items: center;white-space: nowrap">
<span> 支付类型</span>
<el-select v-model="payType" placeholder="请选择付款类型" @change = "getFinanceDateByPayType">
<el-select v-model="payType" placeholder="请选择付款类型" @change="getFinanceDateByPayType">
<el-option
v-for="dict in dict.type.sys_pay_type"
:key="dict.value"
@@ -585,7 +585,9 @@
<!--附件-->
<template v-if="form.accessory">
<el-tooltip class="item" effect="dark" content="点击下载" placement="bottom">
<el-link type="primary" @click="downloadFile(form.accessory)">{{form.accessory.match('[^/]+(?!.*/)')[0]}}</el-link>
<el-link type="primary" @click="downloadFile(form.accessory)">
{{ form.accessory.match('[^/]+(?!.*/)')[0] }}
</el-link>
</el-tooltip>
</template>
<template v-else>
@@ -629,14 +631,14 @@
<el-col :span="8">
<el-form-item label="账户" prop="receiveAccountId">
<el-select v-model="form.receiveAccountId" placeholder="请选择账户">
<el-option
v-for="item in receiveAccounts"
:key="item.receiveAccountId"
:label="item.receiveAccountName"
:value="item.receiveAccountId">
<span v-if="item.receiveAccountId===-1">无分类</span>
</el-option>
</el-select>
<el-option
v-for="item in receiveAccounts"
:key="item.receiveAccountId"
:label="item.receiveAccountName"
:value="item.receiveAccountId">
<span v-if="item.receiveAccountId===-1">无分类</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
@@ -650,12 +652,25 @@
</el-form-item>
</el-col>
<el-col :span="16">
<el-col :span="type == 1 ? 16 : 8">
<el-form-item :label="type == 1 ? '付款方' : '经手人'" prop="financeParties">
<el-input v-model="form.financeParties" placeholder="请输入经手人/付款方"/>
</el-form-item>
</el-col>
<el-col v-if="type==0" :span="8">
<el-form-item label="出账类型" prop="outType">
<el-select v-model="form.outType" placeholder="请选择出账类型(默认其他)">
<el-option
v-for="dict in dict.type.oa_out_finance"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="支付类型" prop="payType">
<el-select v-model="form.payType" placeholder="请选择支付类型">
@@ -770,11 +785,11 @@ import {numberToCNY} from "../../../utils/currencyFormatter";
export default {
name: "Finance",
dicts: ['sys_pay_type'],
dicts: ['sys_pay_type', 'oa_out_finance'],
data() {
return {
// 支付类型
payType:0,
payType: 0,
// 按钮loading
buttonLoading: false,
// 遮罩层
@@ -837,7 +852,7 @@ export default {
titleLink: "增长人数",
checkByTime: {},
monthCheck: {},
receiveAccounts:[],
receiveAccounts: [],
// monthOutByTime: 0,
// monthComeByTime: 0,
yearCheck: {},
@@ -897,7 +912,7 @@ export default {
},
methods: {
// 获取核算信息通过支付类型
getFinanceDateByPayType(){
getFinanceDateByPayType() {
this.getPayTypeBlur()
this.currentBlur()
this.currentBlurList()
@@ -978,7 +993,9 @@ export default {
projectId: 0, //项目id为0排除项目
financeTitle: this.queryParams.financeTitle,
financeParties: this.queryParams.financeParties,
receiveAccountId: this.queryParams.receiveAccountId
receiveAccountId: this.queryParams.receiveAccountId,
pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize,
}
//使用实体里的参数属性,日期转为字符串格式
this.queryParams.params = {};
@@ -989,6 +1006,7 @@ export default {
listFinance(this.queryParams).then(response => {
console.log(response)
//出账列表
if (type == '0') {
this.financeListPro(response.rows).then(res => {
@@ -1018,7 +1036,7 @@ export default {
//tabs选项卡
handleClick(tab, event) {
this.nowTab = tab.index
this.payType=0
this.payType = 0
if (tab.index == '0') {
this.getListFinance('1');
}
@@ -1337,7 +1355,7 @@ export default {
})
},
getPayTypeBlur(){
getPayTypeBlur() {
let now = new Date()
var nowMonth = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间时间为0:0:0
var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); // 获取本月最后一天的日期时间时间为23:59:59
@@ -1516,7 +1534,7 @@ export default {
}, `finance_${new Date().getTime()}.xlsx`)
},
/** 下载文件 */
downloadFile(filePath){
downloadFile(filePath) {
this.$download.resource(filePath)
}
@@ -1627,7 +1645,8 @@ export default {
font-size: 14px;
padding-right: 8px;
}
.node-label{
.node-label {
width: 130px;
overflow: hidden;
text-overflow: ellipsis;