<template>
|
<div class="page-container">
|
<div class="content-container">
|
<div style="width: 50%" class="left-col">
|
<dv-border-box-9 style="padding: 30px 20px 0">
|
<div id="running_state_chart" style="width:100%;height: 300px"></div>
|
<div id="efficiency_chart" style="width: 100%;height: 465px"></div>
|
</dv-border-box-9>
|
</div>
|
|
<div style="width: 50%" class="middle-col">
|
<dv-border-box-9 style="padding: 10px 10px 0">
|
<!-- 添加"我的待办"标题 -->
|
<div class="flow-todo-title">我的待办</div>
|
|
<!-- 嵌入FlowTodo组件并设置默认分类 -->
|
<flow-todo
|
ref="flowTodo"
|
class="embedded-flow-todo"
|
:defaultCategories="['drApproval','ggApproval','programConfirmApproval']"
|
></flow-todo>
|
</dv-border-box-9>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import signageApi from '@/api/signage'
|
import moment from 'moment'
|
import FlowTodo from '@/views/flowable/workflow/FlowTodo.vue'
|
|
export default {
|
name: 'DncManagerSignage',
|
components: {
|
FlowTodo
|
},
|
data() {
|
return {
|
}
|
},
|
mounted() {
|
// 确保组件加载后使用默认分类查询数据
|
this.$nextTick(() => {
|
if (this.$refs.flowTodo) {
|
// 触发查询，使用默认的category条件[1,2]
|
this.$refs.flowTodo.searchQuery()
|
}
|
})
|
},
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.page-container {
|
background-color: #000b29;
|
min-height: 100vh;
|
padding: 15px;
|
|
.content-container {
|
padding-top: 5px;
|
display: flex;
|
justify-content: space-between;
|
gap: 15px;
|
|
.left-col, .middle-col {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.middle-col {
|
.dv-border-box-9 {
|
background-color: #000b29;
|
flex-grow: 1;
|
}
|
|
.flow-todo-title {
|
color: #fff;
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 15px;
|
text-align: center;
|
}
|
|
.embedded-flow-todo {
|
width: 100%;
|
height: 340px; /* 控制高度为右侧一半区域 */
|
overflow: auto;
|
background-color: inherit;
|
}
|
}
|
}
|
}
|
|
// 嵌入组件样式调整
|
.embedded-flow-todo {
|
// 隐藏查询区域、操作按钮和选择提示
|
/deep/ .table-page-search-wrapper,
|
/deep/ .table-operator,
|
/deep/ .ant-alert {
|
display: none !important;
|
}
|
|
// 隐藏多选框列
|
/deep/ .ant-table-selection-column {
|
display: none !important;
|
}
|
|
// 表格边框样式
|
/deep/ .ant-table {
|
border: 1px solid rgba(9, 9, 9, 0.1) !important;
|
border-collapse: collapse !important;
|
}
|
/deep/ .ant-table-thead > tr > th {
|
border: 1px solid rgba(9, 9, 9, 0.1) !important;
|
}
|
/deep/ .ant-table-tbody > tr > td {
|
border: 1px solid rgba(9, 9, 9, 0.1) !important;
|
}
|
|
// 表格样式调整
|
/deep/ .ant-table,
|
/deep/ .ant-table-tbody > tr > td,
|
/deep/ .ant-table-thead > tr > th,
|
/deep/ .ant-table-thead > tr > th span {
|
background-color: transparent !important;
|
color: #000000 !important;
|
}
|
|
// 分页控件样式
|
/deep/ .ant-pagination-item,
|
/deep/ .ant-pagination-prev,
|
/deep/ .ant-pagination-next {
|
background-color: rgb(255, 255, 255) !important;
|
border-color: rgb(255, 255, 255) !important;
|
}
|
|
/deep/ .ant-pagination-item a,
|
/deep/ .ant-pagination-prev a,
|
/deep/ .ant-pagination-next a {
|
color: #000000 !important;
|
}
|
|
/deep/ .ant-pagination-item-active {
|
background-color: rgba(33, 186, 198, 0.6) !important;
|
border-color: rgba(33, 186, 198, 0.8) !important;
|
}
|
|
/deep/ .ant-card {
|
background-color: transparent !important;
|
border: none !important;
|
}
|
|
// 操作列链接样式
|
/deep/ .ant-table-tbody > tr > td a {
|
color: #40a9ff !important;
|
}
|
}
|
|
// 边框组件样式
|
/deep/ .dv-border-box-9 {
|
--color: rgba(33, 186, 198, 0.6) !important;
|
background-color: #000b29 !important;
|
}
|
</style>
|
