From 1d3dbf34877536dec71ae6e4b0f8ee71ffdefa8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com> Date: Thu, 17 Oct 2024 19:55:08 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/home/earlyWarnBj.vue | 13 + src/assets/icons/home/inventory.vue | 13 + src/assets/icons/index.js | 2 + src/components/scImport/index.vue | 1 - src/config/route.js | 112 ++++---- src/layout/components/userbar.vue | 5 +- src/style/home.scss | 69 +++++ src/views/home/console/components/bar.vue | 272 ++++++++++++------ .../home/console/components/progress.vue | 33 ++- src/views/home/console/index.vue | 126 +++++--- src/views/home/search/index.vue | 61 ++++ src/views/order/orderPlan/index.vue | 5 +- 12 files changed, 523 insertions(+), 189 deletions(-) create mode 100644 src/assets/icons/home/earlyWarnBj.vue create mode 100644 src/assets/icons/home/inventory.vue create mode 100644 src/views/home/search/index.vue diff --git a/src/assets/icons/home/earlyWarnBj.vue b/src/assets/icons/home/earlyWarnBj.vue new file mode 100644 index 0000000..789c60b --- /dev/null +++ b/src/assets/icons/home/earlyWarnBj.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/src/assets/icons/home/inventory.vue b/src/assets/icons/home/inventory.vue new file mode 100644 index 0000000..ccb20fc --- /dev/null +++ b/src/assets/icons/home/inventory.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js index 524fbd5..2f115dd 100644 --- a/src/assets/icons/index.js +++ b/src/assets/icons/index.js @@ -145,5 +145,7 @@ export { default as HomeSetup } from './home/setup.vue' export { default as HomeUser } from './home/user.vue' export { default as Repaired } from './home/repaired.vue' export { default as HomeAdd } from './home/Add.vue' +export { default as EarlyWarnBj } from './home/earlyWarnBj.vue' +export { default as HomeInventory } from './home/inventory.vue' diff --git a/src/components/scImport/index.vue b/src/components/scImport/index.vue index 720752a..3dd4e4a 100644 --- a/src/components/scImport/index.vue +++ b/src/components/scImport/index.vue @@ -169,7 +169,6 @@ export default { }, // 上传成功 handleSuccess(){ - // console.log(res,file,files) // this.$message.success('上传成功，马上开始导入数据'); }, // 上传失败 diff --git a/src/config/route.js b/src/config/route.js index d64bc85..51b0c02 100644 --- a/src/config/route.js +++ b/src/config/route.js @@ -6,68 +6,66 @@ const routes = [ { - name: "view-permission", - path:"/setting/user/view-permission", - component:"setting/user/view-permission", + name: "view-search", + path:"/view-search", + component:"home/search/index", meta: { - code:"permission_system_user_view_permission", + code:"", icon: "sc-icon-Home", - title: "查看权限", - hidden: true + title: "搜索", }, }, - - // { - // name: "home", - // path: "/home", - // meta: { - // icon: "sc-icon-Home", - // title: "首页", - // hidden: true - // }, - // children: [{ - // name: "dashboard", - // path: "/dashboard", - // component: "home/console", - // meta: { - // icon: "sc-icon-Console", - // title: "控制台", - // } - // },{ - // name: "userCenter", - // path: "/user-center", - // component: "userCenter", - // meta: { - // icon: "sc-icon-UserInfo", - // title: "个人信息", - // } - // },{ - // name: "document", - // path: "/document", - // component: "docsManager/index", - // meta: { - // icon: "sc-icon-UserInfo", - // title: "文档管理", - // } - // },{ - // name: "earlyWarning", - // path: "/early-warning", - // component: "earlyManager/index", - // meta: { - // icon: "sc-icon-UserInfo", - // title: "预警管理", - // } - // },{ - // name: "mail", - // path: "/mail", - // component: "userCenter", - // meta: { - // icon: "sc-icon-UserInfo", - // title: "我的邮件", - // } - // }] - // }, + { + name: "home", + path: "/home", + meta: { + icon: "sc-icon-Home", + title: "首页", + hidden: true + }, + children: [{ + name: "dashboard", + path: "/dashboard", + component: "home/console", + meta: { + icon: "sc-icon-Console", + title: "控制台", + } + },{ + name: "userCenter", + path: "/user-center", + component: "userCenter", + meta: { + icon: "sc-icon-UserInfo", + title: "个人信息", + } + },{ + name: "document", + path: "/document", + component: "docsManager/index", + meta: { + icon: "sc-icon-UserInfo", + title: "文档管理", + } + },{ + name: "earlyWarning", + path: "/early-warning", + component: "earlyManager/index", + meta: { + icon: "sc-icon-UserInfo", + title: "预警管理", + } + },{ + name: "mail", + path: "/mail", + component: "userCenter", + meta: { + icon: "sc-icon-UserInfo", + title: "我的邮件", + } + }] + }, { name: "order", path: "/order", diff --git a/src/layout/components/userbar.vue b/src/layout/components/userbar.vue index a1d8534..1f207ef 100644 --- a/src/layout/components/userbar.vue +++ b/src/layout/components/userbar.vue @@ -196,7 +196,7 @@ //全屏 screen() { const element = document.documentElement; - this.$TOOL.screen(element) + this.$TOOL.screen(element); }, //显示短消息 showMsg() { @@ -233,7 +233,8 @@ }, //搜索 search() { - this.searchVisible = true + // this.searchVisible = true; + eventBus.$emit('tagClose','/view-search'); }, //任务 tasks() { diff --git a/src/style/home.scss b/src/style/home.scss index 492d17e..3238fb8 100644 --- a/src/style/home.scss +++ b/src/style/home.scss @@ -12,6 +12,24 @@ color: var(--el-color-dark); font-size: 14px; } + .cardTitleFlex{ + display: flex;align-items: center;justify-content: space-between; + .titleBtnView{ + display: flex;align-items: center; + background: #F4F5F9; + border-radius: 4px; + .btnItem{ + padding: 3px 16px; + color: #444;font-size: 12px;font-weight: initial; + cursor: pointer; + } + .trueItem{ + background: var(--el-color-primary); + border-radius: 4px; + color: var(--el-color-white); + } + } + } .cardBody{ flex: 1; display: flex; @@ -123,6 +141,57 @@ } } } + +.workOrderView{ + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: flex-start; + .item{ + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + width: 25%; + .cardContent{ + .num{font-size: 26px;font-weight: 500;color: var(--el-color-dark);margin-bottom: 8px;} + .name{font-size: 12px;color: #888;width: 120px;} + } + } + .item:nth-child(1),.item:nth-child(5){ + + } + .item:nth-child(4),.item:nth-child(8){ + + } +} + +.spareParts{ + display: flex; + align-items: center; + justify-content: space-between; + .item{ + width: calc(50% - 8px); + height: 100%; + padding: 10px; + background: #F8F8F8; + border-radius: 8px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + .icon{font-size: 56px;} + .num{font-size: 26px;font-weight: 500;margin: 8px 0;} + .name{font-size: 12px;color: #555;} + } +} +.orderNum{ + .item{ + flex: 1; + padding: 10px; + } +} + .middleBox{ .briefing{ display: flex; diff --git a/src/views/home/console/components/bar.vue b/src/views/home/console/components/bar.vue index 6874f59..84d1f24 100644 --- a/src/views/home/console/components/bar.vue +++ b/src/views/home/console/components/bar.vue @@ -14,96 +14,200 @@ export default { data(){ return{ option:{ - tooltip: { - trigger: 'axis' - }, - grid: { - left: "1%", - right: '5%', - bottom: '3%', - top: "3%", - containLabel: true - }, - xAxis: { - boundaryGap: true, - type: 'category', - axisLine:{ - show:true, - lineStyle:{ - color:['rgba(255,255,255,0.9)'] - } - }, - axisTick:{ - show:false, - }, - data:['周一','周二','周三','周四','周四','周五','周六','周日'] - }, - yAxis: [{ - type: 'value', - name: '', - axisLine:{ - show:true, - lineStyle:{ - color:['rgba(255,255,255,0.9)'] - } - }, - axisLabel:{ - show:true, - color:'#fff', - }, - axisTick:{ - show:false, - }, - splitLine:{ - show:true, - lineStyle:{ - color:['rgba(255,255,255,0.06)'] - } - } - - }], - series: [ - { - name: '用电', - type: 'bar', - smooth:true, - symbol: 'none', - labelLine:{ - show:false, - smooth:false, - }, - itemStyle: { - color: '#1367C1', - }, - areaStyle: { - opacity: 0.4, - }, - data: [123,646,577,323,687,189,263,462] - }, - { - name: '用气', - type: 'bar', - smooth:'true', - symbol: 'none', - labelLine:{ - }, - itemStyle: { - color: '#2A91C4', - }, - areaStyle: { - opacity: 0.4, - }, - data: [123,246,577,623,267,189,563,246] - }, - ], + // tooltip: { + // trigger: 'axis' + // }, + // grid: { + // left: "1%", + // right: '5%', + // bottom: '3%', + // top: "3%", + // containLabel: true + // }, + // xAxis: { + // boundaryGap: true, + // type: 'category', + // axisLine:{ + // show:true, + // lineStyle:{ + // color:['rgba(255,255,255,0.9)'] + // } + // }, + // axisTick:{ + // show:false, + // }, + // data:['周一','周二','周三','周四','周四','周五','周六','周日'] + // }, + // yAxis: [{ + // type: 'value', + // name: '', + // axisLine:{ + // show:true, + // lineStyle:{ + // color:['rgba(255,255,255,0.9)'] + // } + // }, + // axisLabel:{ + // show:true, + // color:'#fff', + // }, + // axisTick:{ + // show:false, + // }, + // splitLine:{ + // show:true, + // lineStyle:{ + // color:['rgba(255,255,255,0.06)'] + // } + // } + // + // }], + // series: [ + // { + // name: '用电', + // type: 'bar', + // smooth:true, + // symbol: 'none', + // labelLine:{ + // show:false, + // smooth:false, + // }, + // itemStyle: { + // color: '#1367C1', + // }, + // areaStyle: { + // opacity: 0.4, + // }, + // data: [123,646,577,323,687,189,263,462] + // }, + // { + // name: '用气', + // type: 'bar', + // smooth:'true', + // symbol: 'none', + // labelLine:{ + // }, + // itemStyle: { + // color: '#2A91C4', + // }, + // areaStyle: { + // opacity: 0.4, + // }, + // data: [123,246,577,623,267,189,563,246] + // }, + // ], }, + feesData:{ + tableList:{} + }, + reqParams:{ + page:1, + pageSize:30, + date_type:'month', + dateSelect:[], + start:'', + end:'', + } } }, mounted() { - + this.getData(); }, methods:{ - + async getData() { + this.loading = true; + const res = await this.$API.finance.cost.summary.post(this.reqParams); + this.loading = false; + if(res.code == 200){ + res.data.tableList.data = this.setTableList(res.data.tableList.data); + this.feesData = res.data; + let option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + }, + formatter: function (params) { + const filteredParams = params.filter(param => param.value !== 0); + let totalData = 0; + filteredParams.map(em=> { + totalData += em.value + }) + const formattedParams = filteredParams.map(param => { + const percentage = (param.value/totalData*100).toFixed(2); + const seriesColor = param.color; + return `${param.seriesName}
¥ ${param.value}${percentage}%
`; + }).join(''); + return params[0].name + '
总金额：¥ '+ totalData.toFixed(2) + '
' + formattedParams; + } + }, + toolbox:{ + show:false, + feature: { + magicType: { type: ['line', 'bar'] }, + } + }, + grid:{ + bottom:40, + left:10, + }, + legend:{ + show:true, + bottom:10 + }, + xAxis: { + boundaryGap: false, + type: 'category', + data: this.feesData.dateRange + }, + yAxis: [{ + type: 'value', + show:true, + axisLabel:{ + margin:this.feesData.dateRange.length<13? 56:20 + }, + name: '', + axisTick:{ + show:false + }, + splitLine: { + show: false + } + }], + series: this.setList(this.feesData.summaryList), + }; + this.option = option; + } + }, + setList(data){ + let newData = data[0].cost_item.map(item => ({ + name: item, + data: [], + type:'bar', + symbol: 'none', + stack:'fees', + smooth: true, + })); + if(data && data.length>0){ + data.forEach(item => { + item.cost_amount.forEach((amount, index) => { + newData[index].data.push(amount); + }); + }); + } + return newData + }, + setTableList(data){ + let newData = data.columns.map(column => [column]); + if(data.rows && data.rows.length>0){ + data.rows.forEach((row, rowIndex) => { + data.columns.forEach((columnName, columnIndex) => { + newData[columnIndex][1 + rowIndex] = row[columnIndex]==0?'-':'¥'+row[columnIndex]; + }); + }); + } + return newData + }, } } diff --git a/src/views/home/console/components/progress.vue b/src/views/home/console/components/progress.vue index 1d1ff1f..ef4775b 100644 --- a/src/views/home/console/components/progress.vue +++ b/src/views/home/console/components/progress.vue @@ -11,6 +11,23 @@ export default { components:{ scEcharts }, + props:{ + proObj:{ + type:Object, + }, + }, + watch:{ + proObj:{ + deep:true, + immediate:true, + handler(val){ + let option = this.$TOOL.objCopy(this.option); + option.series[0].data[0].value = val.value; + option.series[0].data[0].name = val.title; + this.option = option; + } + } + }, data(){ return{ option:{ @@ -19,7 +36,7 @@ export default { type: 'gauge', startAngle: 90, endAngle: -270, - radius: '86%', + radius: '80%', pointer: { show: false }, @@ -70,22 +87,26 @@ export default { }, data: [ { - value: 46, + value: 0, name: '', + title: { + offsetCenter: ['0%', '30%'] + }, detail: { + fontSize:25, valueAnimation: true, - offsetCenter: ['0%', '0'] + offsetCenter: ['0%', '-10%'] } }, ], title: { - fontSize: 14 + fontSize: 14, }, detail: { - fontSize: 18, + fontSize: 20, color: "#1367C1", borderColor: '#ddd', - borderRadius: 20, + borderRadius: 10, borderWidth: 0, formatter: '{value}%' } diff --git a/src/views/home/console/index.vue b/src/views/home/console/index.vue index df4b7d1..ef9f6cd 100644 --- a/src/views/home/console/index.vue +++ b/src/views/home/console/index.vue @@ -3,29 +3,38 @@
- +
-
占位
-
- +
工单数量
+
+
+
+
{{item.value}}
+
{{item.title}}
+
+
- -
-
占位
-
- + + + + + - -
-
- - + + + + +
-
不良率
-
- +
备件库存
+
+
+ +
{{item.value}}
+
{{item.title}}
+
@@ -54,9 +63,20 @@
-
占位
-
- +
+ 工单数量 +
+
国内
+
海外
+
+
+
+ +
@@ -64,22 +84,22 @@
- +
-
实时数据
+
成本汇总
 - -
-
占位
-
- -
-
- + + + + + + + +
快捷功能入口
@@ -112,11 +132,30 @@ export default { }, data(){ return{ + workOrder:[ + {title:"总工单数",value:2340,icon:''}, + {title:"已维修数",value:560,icon:''}, + {title:"待维修数",value:460,icon:''}, + {title:"0BD 数",value:560,icon:''}, + {title:"1BD 数",value:703,icon:''}, + {title:"当前预约数",value:180,icon:''}, + ], + spareParts:[ + {title:"维保库存数",value:45,icon:'sc-icon-HomeInventory'}, + {title:"预警库存MPN数",value:20,icon:'sc-icon-EarlyWarnBj'}, + ], + reachStandard:[ + {title:"国内SLA 月达标率",value:0}, + {title:"周达标率",value:0}, + {title:"海外SLA 月达标率",value:0}, + {title:"周达标率",value:0}, + ], + reachShow:true, briefing:[ - {num:189376,name:'待提交数',icon:'sc-icon-Gather'}, - {num:12496,name:'计划维修数',icon:'sc-icon-HomeSetup'}, + {num:9376,name:'待提交数',icon:'sc-icon-Gather'}, + {num:126,name:'计划维修数',icon:'sc-icon-HomeSetup'}, {num:756,name:'正在维修数',icon:'sc-icon-Repaired'}, - {num:97662,name:'待审核数',icon:'sc-icon-EarlyWarn'}, + {num:662,name:'待审核数',icon:'sc-icon-EarlyWarn'}, {num:3553,name:'个人中心',icon:'sc-icon-HomeUser'}, {num:253,name:'个人中心',icon:'sc-icon-HomeChart'}, ], @@ -132,7 +171,7 @@ export default { }, methods:{ getWsResult(res){ - if(res.data && (res.data.type == 21)){ + if(res.data && (res.data.type == 21 || res.data.type == 24 || res.data.type == 25 || res.data.type == 26)){ if(res.data.type == 21){ this.briefing.forEach(item=>{ res.data.list_count_info && res.data.list_count_info.main_order_count.forEach(em=>{ @@ -142,6 +181,21 @@ export default { }) }) } + if(res.data.type == 24 && res.data.function == 'order_count'){ + this.workOrder = res.data.count; + } + if(res.data.type == 25){ + this.spareParts.forEach(item=>{ + res.data.count.forEach(em=>{ + if(item.title == em.title){ + item.value = em.value; + } + }) + }) + } + if(res.data.type == 26 && res.data.function == 'repair_count'){ + this.reachStandard = res.data.count + } } } } @@ -154,12 +208,12 @@ export default { display: flex; flex-direction: column; .headerBox{ - flex: 2; + flex: 3; overflow: hidden; padding-bottom: 5px; } .middleBox{ - flex: 3; + flex: 4; padding: 5px 0; } .footerBox{ diff --git a/src/views/home/search/index.vue b/src/views/home/search/index.vue new file mode 100644 index 0000000..0004375 --- /dev/null +++ b/src/views/home/search/index.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/src/views/order/orderPlan/index.vue b/src/views/order/orderPlan/index.vue index fba0d33..5b73a84 100644 --- a/src/views/order/orderPlan/index.vue +++ b/src/views/order/orderPlan/index.vue @@ -69,9 +69,8 @@ export default { return { size:'small', flowList:[ - {name:'执行维修',left:false,right:true}, - {name:'维修中',left:true,right:true}, - {name:'维修完成',left:true,right:false}, + {name:'确认工单',left:false,right:true}, + {name:'下发维保',left:true,right:false}, ], dialog: { confirm: false,