首页样式调整

This commit is contained in:
曹前明 2022-07-21 00:33:21 +08:00
parent d9d647af43
commit 9f2f00f98e
6 changed files with 181 additions and 169 deletions

View File

@ -194,19 +194,17 @@ const routes = [
"meta": { "meta": {
"title": "我创建的", "title": "我创建的",
"icon": "el-icon-folder-add", "icon": "el-icon-folder-add",
"perms": ["ownerwork"]
}, },
"component": "wf/ownerwork" "component": "wf/ownerwork"
} }
, ,
{ {
"name": "duyt", "name": "duty",
"path": "/wf/dutywork", "path": "/wf/dutywork",
"meta": { "meta": {
"title": "待办工单", "title": "待办工单",
"icon": "el-icon-folder-opened", "icon": "el-icon-folder-opened",
"perms": ["duyt"]
}, },
"component": "wf/dutywork" "component": "wf/dutywork"
}, },
@ -216,7 +214,6 @@ const routes = [
"meta": { "meta": {
"title": "我处理的", "title": "我处理的",
"icon": "el-icon-expand", "icon": "el-icon-expand",
"perms": ["worked"]
}, },
"component": "wf/worked" "component": "wf/worked"
}, },
@ -226,7 +223,6 @@ const routes = [
"meta": { "meta": {
"title": "抄送我的", "title": "抄送我的",
"icon": "el-icon-edit-pen", "icon": "el-icon-edit-pen",
"perms": ["ccwork"]
}, },
"component": "wf/ccwork" "component": "wf/ccwork"
}, },

View File

@ -279,6 +279,10 @@ body .tox-tinymce-aux {
margin-bottom: 16px; margin-bottom: 16px;
} }
.el-col .el-card {
margin-bottom: 8px;
}
.el-card, .el-card,
.el-message { .el-message {
border-radius: 0px; border-radius: 0px;

View File

@ -1,116 +1,117 @@
<template> <template>
<el-row :gutter="10"> <el-row :gutter="6">
<el-col :md="6" :sm="24"> <el-col :md="4" :sm="24">
<el-card shadow="hover" style="height: 360px" header="工单待办"> <el-card shadow="hover">
<div class="welcome" v-for="item in dutyAgg" :key="item.workflow"> <template #header>
<div style="width: 33%; float: left"> <div class="card-header">
<div style="margin: 0px 20px 12px 40px"> <span>工单待办</span>
</div>
</template>
<div class="card-body">
<div v-for="item in dutyAgg" :key="item.workflow">
<el-badge :value="item.count" class="item"> <el-badge :value="item.count" class="item">
<el-button <el-button
icon="el-icon-document-copy" icon="el-icon-document-copy"
type="primary" type="primary"
size="small" size="small"
@click="toTicket"
></el-button> ></el-button>
</el-badge> </el-badge>
</div> <div style="font-size:12px">{{ item.workflow__name }}</div>
<div style="margin: 0px 20px 12px 40px">
<span>{{ item.workflow__name }}</span>
</div> </div>
</div> </div>
</div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :md="10" :sm="24"> <el-col :md="12" :sm="24">
<el-card shadow="hover" header="今日事件"> <el-card shadow="hover">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>今日事件</span> <span>今日事件</span>
<el-button @click="moreEvent" type="primary" text>更多</el-button> <el-button @click="moreEvent" type="primary" text>更多</el-button>
</div> </div>
</template> </template>
<scTable <div style="height:340px">
ref="table" <scTable
:apiObj="apiObj" ref="table"
:params="params" :apiObj="apiObj"
row-key="id" :params="params"
fit row-key="id"
stripe fit
hideDo stripe
> hideDo
<el-table-column >
label="#" <el-table-column label="#" type="index" width="50"></el-table-column>
type="index" <el-table-column label="事件种类">
width="50" <template #default="scope">
></el-table-column> <el-span
<el-table-column label="事件种类"> v-for="item in scope.row.cates_"
<template #default="scope"> :key="item.id"
<el-span :label="item.name"
v-for="item in scope.row.cates_" :value="item.id"
:key="item.id" >{{ item.name }}</el-span
:label="item.name" >
:value="item.id" </template>
>{{ item.name }}</el-span </el-table-column>
> <el-table-column label="发生区域" prop="area_.name"></el-table-column>
</template> <el-table-column label="当事人" prop="employee_.name">
</el-table-column> <template #default="scope">
<el-table-column <span
label="发生区域" v-if="scope.row.employee && scope.row.obj_cate == 'people'"
prop="area_.name" >{{ scope.row.employee_.name }}</span
></el-table-column> >
<el-table-column label="当事人" prop="employee_.name"> <span v-else>未知人员</span>
<template #default="scope"> </template>
<span </el-table-column>
v-if="scope.row.employee && scope.row.obj_cate == 'people'"
>{{ scope.row.employee_.name }}</span
>
<span v-else>未知人员</span>
</template>
</el-table-column>
<el-table-column label="人员类型" prop="employee_.type"> <el-table-column label="人员类型" prop="employee_.type">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.employee && scope.row.obj_cate == 'people'">
<span <span
v-if="scope.row.employee && scope.row.obj_cate == 'people'" v-if="
scope.row.employee_.type != '' &&
scope.row.employee_.type == 'employee'
"
>企业员工</span
> >
<span <span
v-if=" v-if="
scope.row.employee_.type != '' && scope.row.employee_.type != '' &&
scope.row.employee_.type == 'employee' scope.row.employee_.type == 'remployee'
" "
>企业员工</span >相关方</span
> >
<span <span
v-if=" v-if="
scope.row.employee_.type != '' && scope.row.employee_.type != '' &&
scope.row.employee_.type == 'remployee' scope.row.employee_.type == 'visitor'
" "
>相关方</span >访客</span
> >
<span </span>
v-if=" </template>
scope.row.employee_.type != '' && </el-table-column>
scope.row.employee_.type == 'visitor' <el-table-column
" label="发生时间"
>访客</span prop="create_time"
> ></el-table-column>
</span>
</template>
</el-table-column>
<el-table-column
label="发生时间"
prop="create_time"
></el-table-column>
<!-- <el-table-column <!-- <el-table-column
label="处理人" label="处理人"
prop="handle_user_name" prop="handle_user_name"
></el-table-column> --> ></el-table-column> -->
</scTable> </scTable>
</div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :md="8" :sm="24"> <el-col :md="8" :sm="24">
<el-card shadow="hover" header="今日事件统计"> <el-card shadow="hover">
<scEcharts height="360px" :option="option3"></scEcharts> <template #header>
<div class="card-header">
<span>今日事件统计</span>
</div>
</template>
<scEcharts height="340px" :option="option3"></scEcharts>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@ -185,6 +186,12 @@ export default {
query: {}, query: {},
}); });
}, },
toTicket() {
this.$router.push({
name: "duty",
query: {},
});
},
// //
async getdutyAgg() { async getdutyAgg() {
let res = await this.$API.wf.ticket.dutyAgg.req({ page: 0 }); let res = await this.$API.wf.ticket.dutyAgg.req({ page: 0 });
@ -252,5 +259,12 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height:24px;
}
.card-body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
height:340px;
} }
</style> </style>

View File

@ -1,78 +1,61 @@
<template> <template>
<el-row :gutter="10"> <el-row :gutter="6">
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<el-card shadow="hover" header="进行项目"> <el-card shadow="hover">
<div style="width:33%;float:left"> <template #header>
<div style="margin: 0px 20px 12px 40px;"> <div class="card-header">
<el-badge :value="operationnumber" class="item"> <span>进行项目</span>
<el-button
icon="el-icon-document-copy"
type="primary"
size="small"
></el-button>
</el-badge>
</div> </div>
<div style="margin: 0px 20px 12px 40px"> </template>
<span>作业</span> <div class="card-body">
<div>
<el-badge :value="operationnumber" class="item">
<el-button
icon="el-icon-document-copy"
type="primary"
size="small"
></el-button>
</el-badge>
<div style="font-size:16px">危险作业</div>
</div>
<div>
<el-badge :value="rpjnumber" class="item">
<el-button
icon="el-icon-document-copy"
type="warning"
size="small"
></el-button>
</el-badge>
<div style="font-size:16px">相关方项目</div>
</div>
<div>
<el-badge :value="visitnumber" class="item">
<el-button
icon="el-icon-document-copy"
type="success"
size="small"
></el-button>
</el-badge>
<div style="font-size:16px">来访项目</div>
</div>
</div> </div>
</div>
<div style="width:33%;float:left">
<div style="margin: 0px 20px 12px 40px;">
<el-badge :value="rpjnumber" class="item">
<el-button
icon="el-icon-document-copy"
type="warning"
size="small"
></el-button>
</el-badge>
</div>
<div style="margin: 0px 20px 12px 40px">
<span>相关方项目</span>
</div>
</div>
<div style="width:33%;float:left">
<div style="margin: 0px 20px 12px 40px;">
<el-badge :value="visitnumber" class="item">
<el-button
icon="el-icon-document-copy"
type="success"
size="small"
></el-button>
</el-badge>
</div>
<div style="margin: 0px 20px 12px 40px">
<span>访客项目</span>
</div>
</div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<el-card shadow="hover"> <el-card shadow="hover">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>人员统计</span> <span>人员统计</span>
<el-button class="button" text>在厂</el-button> <el-switch
<el-button class="button" text>有卡</el-button> v-model="ep_count_type"
</div> active-text="在厂"
</template> inactive-text="有卡"
@change="countTypeChange"
/>
</div>
</template>
<div class="screen-cockpits"> <div class="screen-cockpits">
<div class="cockpit-count"> <div class="cockpit-count">
<!-- <div class="divider"></div>
<div class="simple-title">
<div class="countTypeWrap">
<span
:class="{ activeCount: countIndex === '1' }"
@click="countINdexChange('1')"
>有卡</span
>
<el-divider direction="vertical"></el-divider>
<span
:class="{ activeCount: countIndex === '2' }"
@click="countINdexChange('2')"
>在厂</span
>
</div>
</div> -->
<div class="count-list"> <div class="count-list">
<div class="count-list-item"> <div class="count-list-item">
<div class="item-img item-img2"></div> <div class="item-img item-img2"></div>
@ -118,6 +101,7 @@ export default {
return { return {
dutyAgg: [], dutyAgg: [],
// //
ep_count_type: true,
userCount: { userCount: {
total: 0, total: 0,
count_employee: 0, // count_employee: 0, //
@ -125,8 +109,8 @@ export default {
count_visitor: 0, // count_visitor: 0, //
}, },
operationnumber: null, operationnumber: null,
rpjnumber:null, rpjnumber: null,
visitnumber:null visitnumber: null,
}; };
}, },
created() { created() {
@ -175,7 +159,7 @@ export default {
this.operationnumber = res.count; this.operationnumber = res.count;
}); });
}, },
// //
getRpj() { getRpj() {
this.$API.rpm.rpj.list this.$API.rpm.rpj.list
.req({ page: 1, page_size: 1, state: 40 }) .req({ page: 1, page_size: 1, state: 40 })
@ -183,7 +167,7 @@ export default {
this.rpjnumber = res.count; this.rpjnumber = res.count;
}); });
}, },
//访 //访
getVisit() { getVisit() {
this.$API.vm.visit.list this.$API.vm.visit.list
.req({ page: 1, page_size: 1, state: 40 }) .req({ page: 1, page_size: 1, state: 40 })
@ -276,12 +260,14 @@ export default {
margin: 40px 0 20px 0; margin: 40px 0 20px 0;
} }
.screen-cockpits { .screen-cockpits {
margin-top: -15px; // margin-top: -15px;
.cockpit-count { .cockpit-count {
.count-list { .count-list {
display: flex; display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
margin-left: 30px; justify-content: space-around;
align-items: center;
height: 80px;
.count-list-item { .count-list-item {
width: 33.3333%; width: 33.3333%;
height: 50%; height: 50%;
@ -486,4 +472,16 @@ export default {
} }
} }
} }
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
height:24px;
}
.card-body {
display: flex;
justify-content: space-around;
align-items: center;
height:80px;
}
</style> </style>

View File

@ -13,7 +13,7 @@
<div v-if="nowCompsList.length<=0" class="no-widgets"> <div v-if="nowCompsList.length<=0" class="no-widgets">
<el-empty image="img/no-widgets.svg" description="没有部件啦" :image-size="280"></el-empty> <el-empty image="img/no-widgets.svg" description="没有部件啦" :image-size="280"></el-empty>
</div> </div>
<el-row :gutter="10"> <el-row :gutter="6">
<el-col v-for="(item, index) in grid.layout" v-bind:key="index" :md="item" :xs="24"> <el-col v-for="(item, index) in grid.layout" v-bind:key="index" :md="item" :xs="24">
<draggable v-model="grid.copmsList[index]" animation="200" handle=".customize-overlay" group="people" item-key="com" dragClass="aaaaa" force-fallback fallbackOnBody class="draggable-box"> <draggable v-model="grid.copmsList[index]" animation="200" handle=".customize-overlay" group="people" item-key="com" dragClass="aaaaa" force-fallback fallbackOnBody class="draggable-box">
<template #item="{ element }"> <template #item="{ element }">

View File

@ -13,12 +13,12 @@
clearable clearable
:placeholder="$t('login.userPlaceholder')" :placeholder="$t('login.userPlaceholder')"
> >
<template #append> <!-- <template #append>
<el-select v-model="userType" style="width: 130px"> <el-select v-model="userType" style="width: 130px">
<el-option :label="$t('login.admin')" value="admin"></el-option> <el-option :label="$t('login.admin')" value="admin"></el-option>
<el-option :label="$t('login.user')" value="user"></el-option> <el-option :label="$t('login.user')" value="user"></el-option>
</el-select> </el-select>
</template> </template> -->
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">