Skip to content

T
TF-MOM-WEB
Commit fe4854c7 authored by jingnan's avatar jingnan 👀
Browse files
Options

新首页功能开发

parent b7c16042
Hide whitespace changes
Inline Side-by-side
Showing with 544 additions and 129 deletions
applications/architecture-dee/src/router/index.js
View file @ fe4854c7
...@@ -143,10 +143,10 @@ export const constantRoutes = [ ...@@ -143,10 +143,10 @@ export const constantRoutes = [
{ {
path: '/home', path: '/home',
name: 'home', name: 'home',
meta: { title: '任务中心', disnav: false }, meta: { title: '任务中心', disnav: true },
// component: () => import('../../../dee-task-center/src/views/home/index.vue'), // component: () => import('../../../dee-task-center/src/views/home/index.vue'),
// component: () => import('@/layout/home.vue'), // component: () => import('@/layout/home.vue'),
redirect: '/dee-task-center/home?title=任务中心', redirect: '/dee-task-center/home?title=任务中心&showMenu=false',
hidden: true hidden: true
}, },
// { // {
......
applications/architecture-dee/src/styles/dee-theme/mixins/common.scss
View file @ fe4854c7
...@@ -97,6 +97,10 @@ ...@@ -97,6 +97,10 @@
background: $themeTintColor; background: $themeTintColor;
color: $themeColor; color: $themeColor;
} }
.dee-active-card{
background: $themeTintColor;
// color: $themeColor;
}
.el-submenu__title { .el-submenu__title {
&:hover { &:hover {
background-color: $themeColor !important; background-color: $themeColor !important;
......
applications/dee-task-center/src/api/workflow/taskCenter.js
View file @ fe4854c7
...@@ -19,6 +19,10 @@ export function getUnfinishedTask(params) { ...@@ -19,6 +19,10 @@ export function getUnfinishedTask(params) {
return get('/workflow/task/todo', params) return get('/workflow/task/todo', params)
} }
} }
// 首页获取已办任务列表
export function getFinishedTaskHome(params) {
return get(`/workflow/task/finished?${params}`)
}
// 获取已办任务列表 // 获取已办任务列表
export function getFinishedTask(params) { export function getFinishedTask(params) {
return get('/workflow/task/finished', params) return get('/workflow/task/finished', params)
......
applications/dee-task-center/src/business-components/tabCom/task-detail.vue
View file @ fe4854c7
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
typeName:currTab.webServerName, typeName:currTab.webServerName,
layKey: currTab.configName layKey: currTab.configName
}" }"
:basic-data="basicData.businessObject" :basic-data="{...basicData.businessObject,canDeal:basicData.canDeal}"
:basic-info="basicData.basicInfo" :basic-info="basicData.basicInfo"
/> />
<component :is="currTab.comName" v-else-if="currTab && currTab.comName" :ref="currTab.name" v-bind="currTab.configParams ? JSON.parse(currTab.configParams) : {}" :process-instance-id="processInstanceId" :basic-data="basicData" /> <component :is="currTab.comName" v-else-if="currTab && currTab.comName" :ref="currTab.name" v-bind="currTab.configParams ? JSON.parse(currTab.configParams) : {}" :process-instance-id="processInstanceId" :basic-data="basicData" />
......
applications/dee-task-center/src/views/home/compontents/apply-app.vue
View file @ fe4854c7
...@@ -11,12 +11,14 @@ ...@@ -11,12 +11,14 @@
<span>应用APP</span> <span>应用APP</span>
</div> </div>
<div class="text item div-card"> <div class="text item div-card">
<div v-for="(item, i) in cardList" :key="i" class="card" @click="handClick(item)"> <div v-for="(item, i) in cardList" :key="i" :class="!item.hasPermission?'no-allowed':''">
<div class="icon"> <div :class="!item.hasPermission?'no-click':''" class="card" @click="handClick(item)">
<img :src="item.icon" alt="Icon"> <div class="icon">
</div> <img :src="item.icon" alt="Icon">
<div class="title"> </div>
{{ item.title }} <div class="title">
{{ item.title }}
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -24,6 +26,7 @@ ...@@ -24,6 +26,7 @@
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'
export default { export default {
components: {}, components: {},
data() { data() {
...@@ -38,14 +41,17 @@ export default { ...@@ -38,14 +41,17 @@ export default {
}, },
{ {
icon: '/icons/home/计划管理与执行.png', icon: '/icons/home/计划管理与执行.png',
title: '计划管理与执行', title: '计划与执行管理',
route: { route: {
path: '/dee-mes/inspection-dispatch?title=检验派工&menuRootAppId=1626785745213' path: '/dee-mes/inspection-dispatch?title=检验派工&menuRootAppId=1626785745213'
} }
}, },
{ {
icon: '/icons/home/质量单据.png', icon: '/icons/home/质量单据.png',
title: '质量单据' title: '现场例外管理',
route: {
path: '/page/ca1f328e-b591-4e29-8b48-57a5ae20870d?title=行动项管理&menuRootAppId=1626786988508'
}
}, },
{ {
icon: '/icons/home/物料配套管理.png', icon: '/icons/home/物料配套管理.png',
...@@ -68,10 +74,10 @@ export default { ...@@ -68,10 +74,10 @@ export default {
path: '/page/fb9de1be-089d-44e6-9482-6afe2ebf61ad?title=台账流水&menuRootAppId=1626788424160' path: '/page/fb9de1be-089d-44e6-9482-6afe2ebf61ad?title=台账流水&menuRootAppId=1626788424160'
} }
}, },
{ // {
icon: '/icons/home/实物构型管理.png', // icon: '/icons/home/实物构型管理.png',
title: '实物构型管理' // title: '实物构型管理'
}, // },
{ {
icon: '/icons/home/基础数据管理.png', icon: '/icons/home/基础数据管理.png',
title: '基础数据管理', title: '基础数据管理',
...@@ -86,13 +92,13 @@ export default { ...@@ -86,13 +92,13 @@ export default {
path: '/systemHome?title=systemHome' path: '/systemHome?title=systemHome'
} }
}, },
{ // {
icon: '/icons/home/看板.png', // icon: '/icons/home/看板.png',
title: '看板', // title: '看板',
route: { // route: {
path: '/dee-task-center/workflow/task-center/home?title=我的任务&showMenu=false' // path: '/dee-task-center/workflow/task-center/home?title=我的任务&showMenu=false'
} // }
}, // },
{ {
icon: '/icons/home/单架次MBOM.png', icon: '/icons/home/单架次MBOM.png',
title: '单架次MBOM', title: '单架次MBOM',
...@@ -103,8 +109,18 @@ export default { ...@@ -103,8 +109,18 @@ export default {
] ]
} }
}, },
computed: {}, computed: {
watch: {}, ...mapGetters(['permMenus'])
},
watch: {
cardList: {
immediate: true,
deep: true,
handler(val) {
val && val.length && this.getPermAppMenu()
}
}
},
created() { created() {
// 初始化数据 // 初始化数据
}, },
...@@ -115,6 +131,16 @@ export default { ...@@ -115,6 +131,16 @@ export default {
return return
} }
this.$router.push(val.route) this.$router.push(val.route)
},
// 与有权限的菜单取交集
getPermAppMenu() {
const permMenus = this.permMenus.filter(m => m.dxApplicationId)
this.cardList.forEach(app => {
const menuIdx = permMenus.findIndex(g => g.name === app.title)
if (menuIdx > -1) {
app.hasPermission = !!permMenus.find(h => h.parentId && h.name === app.title)
}
})
} }
} }
} }
...@@ -154,11 +180,12 @@ export default { ...@@ -154,11 +180,12 @@ export default {
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
border: 1px solid #C7C7C7; border: 1px solid #C7C7C7;
padding: 5px; padding: 5px;
// .icon{ .icon{
// img{ img{
// width: 30px; width: 50px;
// } }
// }
}
.title { .title {
text-align: center; text-align: center;
width: calc(100% - 10px); width: calc(100% - 10px);
...@@ -176,5 +203,11 @@ export default { ...@@ -176,5 +203,11 @@ export default {
box-shadow: 0 0 5px rgba(185, 184, 184, 0.5); box-shadow: 0 0 5px rgba(185, 184, 184, 0.5);
transform: scale(0.95); transform: scale(0.95);
} }
.no-click{
pointer-events: none;
}
.no-allowed{
cursor:not-allowed;
}
} }
}</style> }</style>
applications/dee-task-center/src/views/home/compontents/my-task.vue
View file @ fe4854c7
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
<script> <script>
import { showIcon } from '@/utils/util' import { showIcon } from '@/utils/util'
import { getTemps } from '@/api/workflow/userSettings.js' import { getTemps } from '@/api/workflow/userSettings.js'
import { getUnfinishedTask, getFinishedTask } from '@/api/workflow/taskCenter.js' import { getUnfinishedTask, getFinishedTaskHome } from '@/api/workflow/taskCenter.js'
import { getAllApplication } from '@/api/workflow/config' import { getAllApplication } from '@/api/workflow/config'
import _get from 'lodash.get' import _get from 'lodash.get'
import { post } from '@/utils/http' import { post } from '@/utils/http'
...@@ -110,81 +110,79 @@ export default { ...@@ -110,81 +110,79 @@ export default {
split: 2, split: 2,
data: [ data: [
{ {
key: 'appId', key: 'templateKey',
title: '', title: '',
component: { component: {
name: 'el-select', name: 'el-select',
options: [] options: []
}, }
handler: { },
change: (val) => { {
this.pagination.currentPage = 1 key: 'receiveTimeRange',
if (val) { title: '',
const findItem = this.$utils.findFormProp(this.searchFormData, 'appId').component.options.find(r => r.value === val) component: {
this.getTemp(findItem.data.innerName) name: 'el-date-picker',
} else { type: 'daterange',
this.processDefKey = [] clearable: true,
this.getTasks(1, this.type) format: 'yyyy-MM-dd',
} startPlaceholder: '开始时间',
} endPlaceholder: '结束时间'
} }
} }
// {
// key: 'receiveTimeRange',
// title: '',
// component: {
// name: 'el-date-picker',
// type: 'daterange',
// clearable: true,
// format: 'yyyy-MM-dd',
// startPlaceholder: '开始时间',
// endPlaceholder: '结束时间'
// },
// handler: {
// change: (val) => {
// this.pagination.currentPage = 1
// this.getTasks(1)
// }
// }
// }
] ]
} }
], ],
clickTask: null, clickTask: null,
processDefKey: [],
type: '我的待办' type: '我的待办'
} }
}, },
watch: {
searchForm: {
immediate: true,
deep: true,
handler(val) {
// console.log('val: ', val)
this.pagination.currentPage = 1
this.getTasks(1, this.type)
}
}
},
created() { created() {
}, },
mounted: function() { mounted: function() {
this.getAllApplication() this.getAllAppLists()
if (Object.keys(this.dict).length === 0) { if (Object.keys(this.dict).length === 0) {
this.getDict(true) this.getDict(true)
} else {
this.getTasks(1, this.type)
} }
// else {
// this.getTasks(1, this.type)
// }
}, },
methods: { methods: {
getAllApplication() { // 获取所有app后取MOM对应的数据用于查询流程
// 因不同环境切换可能会导致mom对应的appid不同,所以需调用接口获取
getAllAppLists() {
getAllApplication({ getAllApplication({
}).then(res => { }).then(res => {
this.$utils.findFormProp(this.searchFormData, 'appId').component.options = res.items.content.filter(x => !x.isDisable).map(r => { if (res.items && res.items.content) {
return { const momApp = res.items.content.find(item => item.name === 'MOM')
label: r.name, momApp && this.getTempLists(momApp)
value: r.id, }
data: r
}
})
}) })
}, },
getTemp(appName) { // 查询mom下的流程数据
getTemps(this.searchForm.appId, this.searchForm.appId, 1, 9999, { 'enable': true, 'appName': appName }, true).then(res => { getTempLists(momApp) {
if (res.items && res.items.content.length) { getTemps(momApp.id, momApp.id, 1, 9999, { 'enable': true, 'appName': momApp.name }, true).then(res => {
this.processDefKey = res.items.content.map(r => r.procDefKey) if (res.items && res.items.content) {
this.getTasks(1, this.type) this.getTasks(1, this.type)
} else { this.$utils.findFormProp(this.searchFormData, 'templateKey').component.options = res.items.content.map(r => {
this.taskList = [] return {
label: r.name,
value: r.procDefKey,
data: r
}
})
} }
}) })
}, },
...@@ -219,7 +217,7 @@ export default { ...@@ -219,7 +217,7 @@ export default {
async getDict(flag) { async getDict(flag) {
const list = await this.$utils.getDicListByCode(this.stateDictName) const list = await this.$utils.getDicListByCode(this.stateDictName)
this.$set(this.dict, this.stateDictName, list) this.$set(this.dict, this.stateDictName, list)
flag && this.getTasks(1, this.type) // flag && this.getTasks(1, this.type)
}, },
getStateDisplayName(item) { getStateDisplayName(item) {
if (!item.bizExtInfo || !item.bizExtInfo.bizObjectState) { if (!item.bizExtInfo || !item.bizExtInfo.bizObjectState) {
...@@ -230,7 +228,6 @@ export default { ...@@ -230,7 +228,6 @@ export default {
}, },
// 获取待办任务列表 // 获取待办任务列表
getTasks(page, type) { getTasks(page, type) {
console.log(type)
const params = { const params = {
'page': page || this.pagination.currentPage, 'page': page || this.pagination.currentPage,
'size': this.pagination.pageSize 'size': this.pagination.pageSize
...@@ -241,7 +238,7 @@ export default { ...@@ -241,7 +238,7 @@ export default {
params.receiveTime2 = this.searchForm.receiveTimeRange[1] + ' 23:59:59' params.receiveTime2 = this.searchForm.receiveTimeRange[1] + ' 23:59:59'
} }
const str = this.processDefKey && this.processDefKey.length ? this.processDefKey.map(x => `processDefKey=${x}`).join('&') + '&' : '' const str = this.searchForm && this.searchForm.templateKey ? `processDefKey=${this.searchForm.templateKey}&` : ''
this.type = type this.type = type
if (type === '我的待办') { if (type === '我的待办') {
getUnfinishedTask(str + this.$utils.filterParams(params)).then(res => { getUnfinishedTask(str + this.$utils.filterParams(params)).then(res => {
...@@ -252,7 +249,7 @@ export default { ...@@ -252,7 +249,7 @@ export default {
}) })
} }
if (type === '已办任务') { if (type === '已办任务') {
getFinishedTask(str + this.$utils.filterParams(params)).then(res => { getFinishedTaskHome(str + this.$utils.filterParams(params)).then(res => {
if (params.page === 1) { if (params.page === 1) {
this.taskList = [] this.taskList = []
} }
...@@ -321,7 +318,6 @@ export default { ...@@ -321,7 +318,6 @@ export default {
} }
}, },
refresh() { refresh() {
console.log(123123123)
this.getTasks(1, this.type) this.getTasks(1, this.type)
} }
} }
......
applications/dee-task-center/src/views/home/compontents/personal-assistant.vue
View file @ fe4854c7
...@@ -5,39 +5,71 @@ ...@@ -5,39 +5,71 @@
* @FilePath: applications/dee-task-center/src/views/home/compontents/apply-app.vue * @FilePath: applications/dee-task-center/src/views/home/compontents/apply-app.vue
*/ */
<template> <template>
<div class="apply-app"> <div class="personal-assistant">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <el-tabs v-model="activeName" class="tabCon" @tab-click="handleClick">
<span>个人助手</span> <el-tab-pane label="快速访问" name="first">
</div> <div class="text div-card">
<div class="text item div-card"> <div v-for="(item, i) in quickAccessList" :key="i" class="card" @click="goModule(item)">
<div v-for="(item, i) in cardList" :key="i" class="card" @click="handClick(item.title)"> <el-badge :value="item.total" :max="99" class="item">
<div class="icon"> <div class="icon">
<img :src="item.icon" alt="Icon"> <img :src="item.icon" alt="Icon">
</div>
</el-badge>
<div class="title">
{{ item.name }}
</div>
</div>
</div> </div>
<div class="title"> </el-tab-pane>
{{ item.title }} <el-tab-pane label="个人助手" name="second">
<div class="text div-card">
<div v-for="(item, i) in cardList" :key="i" class="card" @click="handleClick(item.title)">
<div class="icon">
<img :src="item.icon" alt="Icon">
</div>
<div class="title">
{{ item.title }}
</div>
</div>
</div> </div>
</div> </el-tab-pane>
</div> </el-tabs>
</el-card> </el-card>
</div> </div>
</template> </template>
<script> <script>
import { getTaskCount } from '@/api/workspace.js'
export default { export default {
components: {}, components: {},
data() { data() {
return { return {
activeName: 'first',
cardList: [ cardList: [
{ {
icon: '/icons/home/质量单据.png', icon: '/icons/home/biaozhunguifan.png',
title: '标准规范' title: '标准规范'
}, },
{ {
icon: '/icons/home/质量单据.png', icon: '/icons/home/helpBook.png',
title: '帮助手册' title: '帮助手册'
} }
] ],
quickAccessList: [
{
icon: '/icons/home/jyrw.png',
name: '检验任务'
},
{
icon: '/icons/home/zprw.png',
name: '装配任务'
},
{
icon: '/icons/home/shrw.png',
name: '适航任务'
}
],
module: {}
} }
}, },
computed: {}, computed: {},
...@@ -45,19 +77,66 @@ export default { ...@@ -45,19 +77,66 @@ export default {
created() { created() {
// 初始化数据 // 初始化数据
}, },
mounted() {
this.getCustomModules('检验任务', 0)
this.getCustomModules('装配任务', 1)
this.getCustomModules('适航任务', 2)
},
methods: { methods: {
handleClick(e) {
console.log('e: ', e)
},
getCustomModules(data, index) {
const params = {}
if (data === '装配任务') {
params.type = 'FitOut'
this.quickAccessList[index].appId = 'myTaskReceive'
} else if (data === '检验任务') {
params.type = 'CheckOut'
this.quickAccessList[index].appId = 'myCheckTaskReceive'
} else {
params.type = 'DMIR'
this.quickAccessList[index].appId = 'myAirTaskReceive'
}
getTaskCount(params).then(res => {
this.$set(this.quickAccessList[index], 'total', res.items.count)
})
},
async goModule(module) {
this.$router.push({
path: '/dee-mes/taskReception',
query: {
title: module.name,
showMenu: false,
showTag: 'false'
}
})
this.$store.dispatch('menu/activeModel', {
appId: module.appId,
pageInfo: {
title: module.name,
path: '/dee-mes/taskReception'
}
})
this.$store.dispatch('app/closeSideBar', false)
}
} }
} }
</script> </script>
<style lang='scss'> <style lang='scss'>
.apply-app { .personal-assistant {
height: 100%; height: 100%;
.box-card { .box-card {
height: 100%; height: 100%;
.el-card__body {
.el-card__body { height: 100%;
height: calc(100% - 90px); .tabCon{
height: 100%;
}
.el-tabs__content{
height: calc(100% - 60px);
}
} }
} }
...@@ -68,7 +147,6 @@ export default { ...@@ -68,7 +147,6 @@ export default {
grid-template-columns: repeat(auto-fill, calc((100% - 60px) / 4)); // 自动填充一行的卡片个数 grid-template-columns: repeat(auto-fill, calc((100% - 60px) / 4)); // 自动填充一行的卡片个数
justify-content: space-between; // 卡片两端对齐，与flex的该属于一致 justify-content: space-between; // 卡片两端对齐，与flex的该属于一致
grid-gap: 20px; grid-gap: 20px;
// padding-bottom: 10px; // padding-bottom: 10px;
.card { .card {
display: flex; display: flex;
...@@ -84,11 +162,11 @@ export default { ...@@ -84,11 +162,11 @@ export default {
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
border: 1px solid #C7C7C7; border: 1px solid #C7C7C7;
padding: 5px; padding: 5px;
// .icon{ .icon{
// img{ img{
// width: 30px; width: 50px;
// } }
// } }
.title { .title {
text-align: center; text-align: center;
width: calc(100% - 10px); width: calc(100% - 10px);
......
applications/dee-task-center/src/views/home/compontents/rightCenterPaneBottom.vue 0 → 100644
View file @ fe4854c7
/**
* @Description:物料缺件分析
* @author gjn
* @date 2023/12/04
*/
<template>
<div ref="pieDom" style="height: 200px; width:200px" />
</template>
<script>
export default {
props: {
item: {
type: Object,
default: () => {}
}
},
data() {
return {
pieEcharts: '',
pieOption: {},
datas: [],
hideColor: '#E2E7EB'
}
},
mounted() {
this.datas = [
{
value: this.item.present,
name: this.item.present + '%'
},
{
value: 100 - this.item.present,
name: (100 - this.item.present) + '%'
}
]
this.pieEcharts = this.$echarts.init(this.$refs.pieDom)
this.setPieOption()
this.setPieEvents()
},
methods: {
setPieOption() {
this.pieOption = {
color: [this.item.color, this.hideColor], // 环形的分段色值设置
title: {
text: this.item.name,
color: '#3F3F3F',
bottom: -4,
right: 'center',
textStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'item',
position: (point, params, dom, rect, size) => {
return [point[0], point[1]]
}
},
series: [{
type: 'pie',
radius: ['50%', '70%'], // 内存 、外层
avoidLabelOverlap: false,
hoverAnimation: true,
hoverOffset: 2,
label: {
normal: {
show: false, // 中间的标签
position: 'center',
textStyle: {
fontSize: '18',
fontWeight: 'bold'
}
},
emphasis: {
show: true,
textStyle: {
fontSize: '18',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
selectedOffset: 0,
itemStyle: {
emphasis: {
}
},
data: this.datas
}]
}
// 渲染图表
this.pieEcharts.setOption(this.pieOption)
},
/**
* 设置图表的事件
*/
setPieEvents() {
/**
* 刷新时默认显示第一条
*/
this.pieEcharts.dispatchAction(
{
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
}
)
/**
* 鼠标移入图表时，不为第一条时就取消第一条的高亮效果
*/
this.pieEcharts.on('mouseover', (v) => {
if (v.dataIndex !== 0) {
this.pieEcharts.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: 0
})
}
})
/**
* 鼠标图表时默认显示第一条
*/
this.pieEcharts.on('mouseout', (v) => {
this.pieEcharts.dispatchAction(
{
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
}
)
})
// 监听窗口变化 - 只刷新最后一个图表
// window.onresize = () => {
// this.pieEcharts.resize()
// }
// 监听窗口变化 - 多个图表同时刷新
// window.addEventListener('resize', () => {
// this.pieEcharts.resize()
// })
}
}
}
</script>
<style scoped>
</style>
applications/dee-task-center/src/views/home/compontents/rightCenterPaneTop.vue 0 → 100644
View file @ fe4854c7
/**
* @Description:站位完工统计
* @author gjn
* @date 2023/12/04
*/
<template>
<el-card class="rightCenterPaneTop">
<div slot="header" class="clearfix">
<span>站位完工统计</span>
</div>
<div id="topChart" style="height:400px;width: 100%" />
</el-card>
</template>
<script>
export default {
name: '',
components: {},
props: {},
data() {
return {}
},
computed: {},
watch: {},
created() {},
mounted() {
this.$nextTick(function() {
this.initChart()
})
},
methods: {
initChart() {
const that = this
that.chart = this.$echarts.init(document.getElementById('topChart'))
const option = {
color: ['#4DADF6', '#3FD1C2'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#345678'
}
}
},
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
legend: {
data: ['到账金额', '合同金额'],
right: 100
},
xAxis: [
{
type: 'category',
data: ['51站位', '52站位', '53站位', '54站位', '55站位', '56站位', '57站位'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '到账金额',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: '合同金额',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
}
]
}
that.chart.setOption(option)
}
}
}
</script>
<style lang="scss">
.rightCenterPaneTop{
height: 100%;
}
</style>
applications/dee-task-center/src/views/home/index.vue
View file @ fe4854c7
...@@ -6,11 +6,11 @@ ...@@ -6,11 +6,11 @@
*/ */
<template> <template>
<div class="home-container"> <div class="home-container">
<dee-fold-pane :min-percent="30" :default-percent="35" split="vertical" class="detail-pane"> <dee-fold-pane :min-percent="30" :default-percent="33" split="vertical" class="detail-pane">
<template slot="paneL"> <template slot="paneL">
<!-- 左侧 --> <!-- 左侧 -->
<div class="Left-pane"> <div class="Left-pane">
<div v-for="(item, i) in cardList" :key="i" class="card" @click="handClick(item.title)"> <div v-for="(item, i) in cardList" :key="i" class="card" :class="item.title===activeTitle?'dee-active-card':''" @click="handClick(item.title)">
<div class="icon"> <div class="icon">
<img :src="item.icon" alt="Icon"> <img :src="item.icon" alt="Icon">
</div> </div>
...@@ -37,11 +37,23 @@ ...@@ -37,11 +37,23 @@
</template> </template>
<template slot="paneR"> <template slot="paneR">
<div class="right-pane"> <div class="right-pane">
<dee-fold-pane :min-percent="30" :default-percent="60" split="vertical" class="detail-pane"> <dee-fold-pane :min-percent="30" :default-percent="55" split="vertical" class="detail-pane">
<template slot="paneL"> <template slot="paneL">
<!-- 中间 --> <!-- 中间 -->
<div class="right-centerPane-top" /> <div class="right-centerPane-top">
<div class="right-centerPane-bottom" /> <right-centerPane-top />
</div>
<div class="right-centerPane-bottom">
<el-card style="height:100%">
<div slot="header" class="clearfix">
<span>物料缺件分析</span>
</div>
<div class="chartsBox">
<right-centerPane-bottom v-for="(item,index) in materialLists" :key="index" :item="item" />
</div>
</el-card>
</div>
</template> </template>
<template slot="paneR"> <template slot="paneR">
<!-- 右侧 --> <!-- 右侧 -->
...@@ -63,9 +75,11 @@ import MyTask from './compontents/my-task.vue' ...@@ -63,9 +75,11 @@ import MyTask from './compontents/my-task.vue'
import ModuleTaskList from '../workflow/task-center/myPlanTask/moduleTaskListNew' import ModuleTaskList from '../workflow/task-center/myPlanTask/moduleTaskListNew'
import ApplyApp from './compontents/apply-app.vue' import ApplyApp from './compontents/apply-app.vue'
import PersonalAssistant from './compontents/personal-assistant.vue' import PersonalAssistant from './compontents/personal-assistant.vue'
import RightCenterPaneTop from './compontents/rightCenterPaneTop.vue'
import RightCenterPaneBottom from './compontents/rightCenterPaneBottom.vue'
export default { export default {
components: { MyTask, ModuleTaskList, ApplyApp, PersonalAssistant }, components: { MyTask, ModuleTaskList, ApplyApp, PersonalAssistant, RightCenterPaneTop, RightCenterPaneBottom },
data() { data() {
return { return {
cardList: [ cardList: [
...@@ -76,12 +90,16 @@ export default { ...@@ -76,12 +90,16 @@ export default {
{ {
icon: '/icons/home/已办任务.png', icon: '/icons/home/已办任务.png',
title: '已办任务' title: '已办任务'
},
{
icon: '/icons/home/我的请求.png',
title: '我的请求'
} }
], ],
materialLists: [
{ color: '#4FA2EE', name: '某缺件率', present: 80 },
{ color: '#79B38D', name: '某缺件率', present: 25 },
{ color: '#E4B8DB', name: '某缺件率', present: 25 },
{ color: '#EDD169', name: '某缺件率', present: 25 },
{ color: '#F48686', name: '某缺件率', present: 20 }
],
activeTitle: '我的待办' activeTitle: '我的待办'
} }
}, },
...@@ -148,19 +166,20 @@ export default { ...@@ -148,19 +166,20 @@ export default {
} }
.Left-pane { .Left-pane {
height: 80px; height: 70px;
// 下面是重点 // 下面是重点
display: grid; display: flex;
grid-template-columns: repeat(auto-fill, calc((100% - 40px) / 3)); // 自动填充一行的卡片个数 // grid-template-columns: repeat(auto-fill, calc((100% - 40px) / 3)); // 自动填充一行的卡片个数
justify-content: space-between; // 卡片两端对齐，与flex的该属于一致 justify-content: start; // 卡片两端对齐，与flex的该属于一致
padding-bottom: 15px; padding-bottom: 10px;
border-bottom:1px solid #EBEEF5;
.card { .card {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
width: calc(100% - 20px); width: 25%;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
border-radius: 4px; border-radius: 4px;
...@@ -173,10 +192,10 @@ export default { ...@@ -173,10 +192,10 @@ export default {
box-shadow: 0 0 10px rgba(224, 220, 220, 0.7); box-shadow: 0 0 10px rgba(224, 220, 220, 0.7);
} }
.card:active { // .card:active {
box-shadow: 0 0 5px rgba(185, 184, 184, 0.5); // box-shadow: 0 0 5px rgba(185, 184, 184, 0.5);
transform: scale(0.95); // transform: scale(0.95);
} // }
} }
.task { .task {
...@@ -204,6 +223,15 @@ export default { ...@@ -204,6 +223,15 @@ export default {
height: calc(50% - 9px); height: calc(50% - 9px);
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
.el-card__body{
height: 100%;
padding: 10px;
}
.chartsBox{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
} }
} }
</style> </style>
applications/dee-task-center/src/views/workflow/task-center/myPlanTask/taskList.vue
View file @ fe4854c7
...@@ -69,6 +69,7 @@ export default { ...@@ -69,6 +69,7 @@ export default {
<style lang="scss"> <style lang="scss">
.MyPlanTaskPage { .MyPlanTaskPage {
// padding: 10px 0; // padding: 10px 0;
background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
......
applications/dee-task-center/src/views/workflow/task-center/myPlanTask/taskListDetail.vue
View file @ fe4854c7
...@@ -61,6 +61,7 @@ export default { ...@@ -61,6 +61,7 @@ export default {
<style lang="scss"> <style lang="scss">
.MyPlanTaskPage { .MyPlanTaskPage {
background-color: #fff;
// padding: 10px 0; // padding: 10px 0;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment