修改首页面板
This commit is contained in:
龙运模
parent
856dbfe26e
commit
1d3dbf3487
13
src/assets/icons/home/earlyWarnBj.vue
Normal file
13
src/assets/icons/home/earlyWarnBj.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<svg t="1729148285396" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5501" width="200" height="200"><path d="M0 0m146.285714 0l731.428572 0q146.285714 0 146.285714 146.285714l0 731.428572q0 146.285714-146.285714 146.285714l-731.428572 0q-146.285714 0-146.285714-146.285714l0-731.428572q0-146.285714 146.285714-146.285714Z" fill="#D9B039" p-id="5502"></path><path d="M746.331429 360.594286l-121.782858-135.350857a23.881143 23.881143 0 0 0-17.792-7.954286H322.432a50.980571 50.980571 0 0 0-50.724571 50.816v487.789714a50.980571 50.980571 0 0 0 50.852571 50.852572h379.318857a50.633143 50.633143 0 0 0 50.377143-51.181715V376.466286a23.04 23.04 0 0 0-5.924571-15.872z m-210.651429 187.190857a23.826286 23.826286 0 0 1-47.652571 0v-158.902857a23.990857 23.990857 0 0 1 23.954285-23.844572h0.329143a23.698286 23.698286 0 0 1 23.515429 23.826286l-0.146286 158.902857zM512 639.579429h0.329143a31.250286 31.250286 0 0 1 31.140571 31.451428 31.323429 31.323429 0 1 1-62.537143 0 31.268571 31.268571 0 0 1 31.085715-31.451428z" fill="#FFFFFF" p-id="5503"></path></svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "earlyWarnBj"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
src/assets/icons/home/inventory.vue
Normal file
13
src/assets/icons/home/inventory.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<svg t="1729148298299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5644" width="200" height="200"><path d="M0 0m146.285714 0l731.428572 0q146.285714 0 146.285714 146.285714l0 731.428572q0 146.285714-146.285714 146.285714l-731.428572 0q-146.285714 0-146.285714-146.285714l0-731.428572q0-146.285714 146.285714-146.285714Z" fill="#1367C1" p-id="5645"></path><path d="M672.073143 350.793143s27.830857 0 27.830857 25.289143v25.289143H324.077714v-25.289143c0-25.289143 27.830857-25.289143 27.830857-25.289143h320.164572z" fill="#FFFFFF" p-id="5646"></path><path d="M736.054857 379.684571l20.370286 19.529143c2.230857 2.322286 4.370286 4.425143 6.381714 6.381715 12.580571 12.324571 20.352 19.931429 14.774857 50.651428-3.620571 20.022857-15.030857 90.130286-25.161143 152.411429-7.917714 48.585143-15.049143 92.416-17.097142 103.936a33.645714 33.645714 0 0 1-33.170286 28.525714H321.792a33.737143 33.737143 0 0 1-33.243429-28.525714c-1.938286-11.062857-8.594286-52.041143-16.146285-98.377143-10.331429-63.634286-22.345143-137.453714-26.038857-157.970286-5.485714-30.573714 2.230857-38.235429 14.72-50.633143 1.993143-1.956571 4.114286-4.059429 6.308571-6.4l20.425143-19.529143v50.651429h448.256v-50.651429h-0.018286z m-119.222857 122.88a25.307429 25.307429 0 0 0-25.307429 25.270858v46.994285a7.222857 7.222857 0 0 1-7.241142 7.222857h-144.566858a7.222857 7.222857 0 0 1-7.241142-7.241142v-46.976a25.289143 25.289143 0 0 0-50.56 0v75.904a28.982857 28.982857 0 0 0 28.928 28.946285h202.441142a28.964571 28.964571 0 0 0 28.928-28.946285v-75.885715a25.417143 25.417143 0 0 0-25.417142-25.307428h0.036571zM628.388571 285.714286s28.196571 0 28.196572 36.150857H374.637714c0-36.150857 28.16-36.150857 28.16-36.150857h225.590857z" fill="#FFFFFF" p-id="5647"></path></svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "inventory"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -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'
|
||||
|
||||
|
||||
|
||||
@ -169,7 +169,6 @@ export default {
|
||||
},
|
||||
// 上传成功
|
||||
handleSuccess(){
|
||||
// console.log(res,file,files)
|
||||
// this.$message.success('上传成功，马上开始导入数据');
|
||||
},
|
||||
// 上传失败
|
||||
|
||||
@ -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: "查看权限",
|
||||
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",
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -14,96 +14,200 @@ export default {
|
||||
data(){
|
||||
return{
|
||||
option:{
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
// 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]
|
||||
// },
|
||||
// ],
|
||||
},
|
||||
grid: {
|
||||
left: "1%",
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
top: "3%",
|
||||
containLabel: true
|
||||
feesData:{
|
||||
tableList:{}
|
||||
},
|
||||
xAxis: {
|
||||
boundaryGap: true,
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
color:['rgba(255,255,255,0.9)']
|
||||
reqParams:{
|
||||
page:1,
|
||||
pageSize:30,
|
||||
date_type:'month',
|
||||
dateSelect:[],
|
||||
start:'',
|
||||
end:'',
|
||||
}
|
||||
},
|
||||
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]
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
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 `<span style="display: flex;justify-content: space-between"><span><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${seriesColor};"></span>${param.seriesName} </span><div style="display: flex;justify-content: space-between;margin-left: 15px"><span style="font-weight: 500;display: inline-block;text-align: right;">¥ ${param.value}</span><span style="display: inline-block;margin-left: 10px; width: 50px;text-align: left;font-weight: 500;">${percentage}%</span></div></span>`;
|
||||
}).join('');
|
||||
return params[0].name + '<br/>总金额：¥ '+ totalData.toFixed(2) + '<br/>' + 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
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -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}%'
|
||||
}
|
||||
|
||||
@ -3,29 +3,38 @@
|
||||
<div class="consoleView">
|
||||
<div class="headerBox">
|
||||
<el-row class="colRow" :gutter="20">
|
||||
<el-col class="leftCol" :span="10" :md="10" :sm="24" :xs="24">
|
||||
<el-col class="leftCol" :span="16" :md="16" :sm="24" :xs="24">
|
||||
<div class="cardBox">
|
||||
<div class="cardTitle">占位</div>
|
||||
<div class="cardBody">
|
||||
|
||||
<div class="cardTitle">工单数量</div>
|
||||
<div class="cardBody workOrderView">
|
||||
<div class="item" v-for="(item,index) in workOrder" :key="index">
|
||||
<div class="cardContent">
|
||||
<div class="num">{{item.value}}</div>
|
||||
<div class="name">{{item.title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col class="middleCol" :span="10" :md="10" :sm="24" :xs="24">
|
||||
<div class="cardBox">
|
||||
<div class="cardTitle">占位</div>
|
||||
<div class="cardBody">
|
||||
<el-scrollbar>
|
||||
<!-- <el-col class="middleCol" :span="10" :md="10" :sm="24" :xs="24">-->
|
||||
<!-- <div class="cardBox">-->
|
||||
<!-- <div class="cardTitle">占位</div>-->
|
||||
<!-- <div class="cardBody">-->
|
||||
<!-- <el-scrollbar>-->
|
||||
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col class="rightCol" :span="4" :md="4" :sm="24" :xs="24">
|
||||
<!-- </el-scrollbar>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col class="rightCol" :span="8" :md="8" :sm="24" :xs="24">
|
||||
<div class="cardBox progressView">
|
||||
<div class="cardTitle">不良率</div>
|
||||
<div class="cardBody">
|
||||
<progressBox />
|
||||
<div class="cardTitle">备件库存</div>
|
||||
<div class="cardBody spareParts">
|
||||
<div class="item" v-for="(item,index) in spareParts" :key="index">
|
||||
<el-icon class="icon"><component :is="item.icon" /></el-icon>
|
||||
<div class="num">{{item.value}}</div>
|
||||
<div class="name">{{item.title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -54,9 +63,20 @@
|
||||
</el-col>
|
||||
<el-col class="rightCol" :span="8" :md="8" :sm="24" :xs="24">
|
||||
<div class="cardBox chartView">
|
||||
<div class="cardTitle">占位</div>
|
||||
<div class="cardBody">
|
||||
<pointBox />
|
||||
<div class="cardTitle cardTitleFlex">
|
||||
<span class="name">工单数量</span>
|
||||
<div class="titleBtnView">
|
||||
<div class="btnItem" :class="reachShow?'trueItem':''" @click="reachShow=true">国内</div>
|
||||
<div class="btnItem" :class="!reachShow?'trueItem':''" @click="reachShow=false">海外</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cardBody orderNum">
|
||||
<template v-for="(item,index) in reachStandard" :key="index">
|
||||
<div class="item" v-if="reachShow?index<2:index>=2">
|
||||
<progressBox :proObj="item" />
|
||||
</div>
|
||||
</template>
|
||||
<!-- <pointBox />-->
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -64,22 +84,22 @@
|
||||
</div>
|
||||
<div class="footerBox">
|
||||
<el-row class="colRow" :gutter="20">
|
||||
<el-col class="leftCol" :span="8" :md="8" :sm="24" :xs="24">
|
||||
<el-col class="leftCol" :span="16" :md="16" :sm="24" :xs="24">
|
||||
<div class="cardBox chartView">
|
||||
<div class="cardTitle">实时数据</div>
|
||||
<div class="cardTitle">成本汇总</div>
|
||||
<div class="cardBody">
|
||||
<barBox />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col class="middleCol" :span="8" :md="8" :sm="24" :xs="24">
|
||||
<div class="cardBox chartView">
|
||||
<div class="cardTitle">占位</div>
|
||||
<div class="cardBody">
|
||||
<ringBox />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- <el-col class="middleCol" :span="8" :md="8" :sm="24" :xs="24">-->
|
||||
<!-- <div class="cardBox chartView">-->
|
||||
<!-- <div class="cardTitle">占位</div>-->
|
||||
<!-- <div class="cardBody">-->
|
||||
<!-- <ringBox />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col class="rightCol" :span="8" :md="8" :sm="24" :xs="24">
|
||||
<div class="cardBox chartView">
|
||||
<div class="cardTitle">快捷功能入口</div>
|
||||
@ -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{
|
||||
|
||||
61
src/views/home/search/index.vue
Normal file
61
src/views/home/search/index.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<el-container class="searchBox">
|
||||
<el-header class="searchHeader">
|
||||
<div class="searchHeaderBack">
|
||||
<el-row style="width: 100%" :gutter="24" justify="center">
|
||||
<el-col :span="10" :lg="8" :sm="10">
|
||||
<el-input type="text" size="large">
|
||||
<template #prepend>
|
||||
<el-select style="width: 115px">
|
||||
<el-option label="维保工单" value="1" ></el-option>
|
||||
<el-option label="公司信息" value="2" ></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button icon="el-icon-Search">搜索</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
7889
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.searchHeader{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 68px;
|
||||
background: url(https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/search_back.png) no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
.searchHeaderBack{
|
||||
height: 100%;width: 100%;
|
||||
padding: 0;
|
||||
background: rgba(231,243,255,0.4);
|
||||
position: absolute;left: 0;top: 0;z-index: 10;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user