admin/wisdomisitezwfront-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ai预警和首页样式解决

Browse Source
This commit is contained in:
于晏彭 2023-04-25 14:37:08 +08:00
parent 97c68850b0
commit 2aab9a8982
12 changed files with 142 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LeftMenu/LeftMenu.vue
View File

@ -10,7 +10,7 @@
<div class="search-wrapper"> <div class="search-wrapper">
<!-- placeholder 应对应 tab 页，可以在 tabs 中一起传入 --> <!-- placeholder 应对应 tab 页，可以在 tabs 中一起传入 -->
<el-input :prefix-icon="Search" v-model="value" placeholder="请输入工程名称" /> <el-input :prefix-icon="Search" v-model="value" placeholder="请输入" />
<el-button class="search-btn" type="primary" @click="search">搜索</el-button> <el-button class="search-btn" type="primary" @click="search">搜索</el-button>
</div> </div>

2
src/components/LeftMenu/leftMenu.scss
View File

@ -50,7 +50,7 @@
background-color: #ffffff; background-color: #ffffff;
} }
.search-btn { .search-btn {
margin-left: 5px; margin-left: 12px;
} }
.footer { .footer {
display: flex; display: flex;

7
src/styles/common.scss
View File

@ -168,3 +168,10 @@
.m-10 { .m-10 {
margin: 0 20px; margin: 0 20px;
} }
// 分页器
.pagination {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

24
src/views/enterprise/AIwarning/accessSituation/index.scss
View File

@ -44,20 +44,24 @@
} }
.imgPage { .imgPage {
box-sizing: border-box; box-sizing: border-box;
display: flex;
flex: 1; flex: 1;
flex-wrap: wrap; width: 100%;
justify-content: flex-start;
padding: 20px; padding: 20px;
margin-top: 20px; margin-top: 20px;
overflow-y: scroll; overflow-y: scroll;
background-color: #ffffff; background-color: #ffffff;
border-radius: 8px; border-radius: 8px;
display: flex;
flex-direction: column;
.imgTable {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex: 1;
.img_item { .img_item {
width: 31.3%; width: 31.3%;
height: 244px;
// height: 26%;
// padding: 10px;
margin: 10px; margin: 10px;
cursor: pointer; cursor: pointer;
border: 1px solid #dedddd; border: 1px solid #dedddd;
@ -74,6 +78,14 @@
} }
} }
} }
.pagination {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
}
} }
} }
:deep(.el-scrollbar__view) { :deep(.el-scrollbar__view) {

7
src/views/enterprise/AIwarning/accessSituation/index.vue
View File

@ -62,8 +62,9 @@
<!-- </div> --> <!-- </div> -->
<div class="imgPage"> <div class="imgPage">
<div class="imgTable">
<div class="img_item" v-for="item in questList.records" @click="onShowImg(item)" :key="item.id"> <div class="img_item" v-for="item in questList.records" @click="onShowImg(item)" :key="item.id">
<el-image style="width: 100%; height: 140px" :src="item.image" fit="fill" /> <el-image style="width: 100%; height: 182px" :src="item.image" fit="fill" />
<div class="page_text flx-justify-column"> <div class="page_text flx-justify-column">
<div class="img_title">{{ item.typeName }}</div> <div class="img_title">{{ item.typeName }}</div>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
@ -72,13 +73,15 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<Pagination <Pagination
:pageable="pageable" :pageable="pageable"
layout="prev, pager, next, jumper" layout="prev, pager, next, jumper"
:handleSizeChange="handleSizeChange" :handleSizeChange="handleSizeChange"
:handleCurrentChange="handleCurrentChange" :handleCurrentChange="handleCurrentChange"
:background="background" :background="background"
style="margin: 10px auto" class="pagination"
/> />
</div> </div>
</div> </div>

26
src/views/goverment/AIwarning/accessSituation/index.scss
View File

@ -11,16 +11,10 @@
// margin-left: 20px; // margin-left: 20px;
padding: 0 0 0 20px; padding: 0 0 0 20px;
// padding: 0 13% 0 20px;
// background-color: aqua;
.form_div { .form_div {
height: 56px; height: 56px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 8px; border-radius: 8px;
// display: flex;
// // justify-content: center;
// align-items: center;
} }
.form { .form {
padding: 16px 0 0 36px; padding: 16px 0 0 36px;
@ -30,20 +24,24 @@
} }
.imgPage { .imgPage {
box-sizing: border-box; box-sizing: border-box;
display: flex;
flex: 1; flex: 1;
flex-wrap: wrap; width: 100%;
justify-content: flex-start;
padding: 20px; padding: 20px;
margin-top: 20px; margin-top: 20px;
overflow-y: scroll; overflow-y: scroll;
background-color: #ffffff; background-color: #ffffff;
border-radius: 8px; border-radius: 8px;
display: flex;
flex-direction: column;
.imgTable {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex: 1;
.img_item { .img_item {
width: 31.3%; width: 31.3%;
height: 244px;
// height: 26%;
// padding: 10px;
margin: 10px; margin: 10px;
cursor: pointer; cursor: pointer;
border: 1px solid #dedddd; border: 1px solid #dedddd;
@ -59,11 +57,13 @@
} }
} }
} }
}
.pagination { .pagination {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; margin-top: 20px;
} }
} }
} }

4
src/views/goverment/AIwarning/accessSituation/index.vue
View File

@ -64,8 +64,9 @@
<!-- </div> --> <!-- </div> -->
<div class="imgPage"> <div class="imgPage">
<div class="imgTable">
<div class="img_item" v-for="item in questList.records" @click="onShowImg(item)" :key="item.id"> <div class="img_item" v-for="item in questList.records" @click="onShowImg(item)" :key="item.id">
<el-image style="width: 100%; height: 140px" :src="item.image" fit="fill" /> <el-image style="width: 100%; height: 182px" :src="item.image" fit="fill" />
<div class="page_text flx-justify-column"> <div class="page_text flx-justify-column">
<div class="img_title">{{ item.typeName }}</div> <div class="img_title">{{ item.typeName }}</div>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
@ -74,6 +75,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- :handleSizeChange="handleSizeChange" --> <!-- :handleSizeChange="handleSizeChange" -->
<Pagination <Pagination
:pageable="pageable" :pageable="pageable"

3
src/views/goverment/AIwarning/alarmRecord/index.scss
View File

@ -53,6 +53,9 @@
} }
} }
} }
.diaForm {
padding: 0 20% 0 0;
}
.img_title { .img_title {
margin: 0 0 4px; margin: 0 0 4px;
font-family: "siyuan_Medium"; font-family: "siyuan_Medium";

2
src/views/goverment/AIwarning/alarmRecord/index.vue
View File

@ -64,7 +64,7 @@
</div> </div>
<el-dialog class="imgDialog" title="查看" width="50%" v-model="visible" show-close> <el-dialog class="imgDialog" title="查看" width="50%" v-model="visible" show-close>
<div class="littleTitle Snap">抓拍隐患</div> <div class="littleTitle Snap">抓拍隐患</div>
<el-form class="diaForm" :model="form" ref="topForm" label-width="160px"> <el-form class="diaForm" disabled :model="form" ref="topForm" label-width="180px">
<el-form-item label="名称："> <el-form-item label="名称：">
<el-input v-model="form.projectName" placeholder="请输入" /> <el-input v-model="form.projectName" placeholder="请输入" />
</el-form-item> </el-form-item>

54
src/views/home/index.scss
View File

@ -80,32 +80,70 @@
// color: #fff; // color: #fff;
display: flex; display: flex;
background-color: #008bff; background-color: #008bff;
.header-item { border-radius: 8px;
.header-important {
position: relative;
display: flex; display: flex;
flex: none;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 330px; width: 20%;
height: 170px; height: 170px;
overflow-x: auto; overflow-x: auto;
cursor: pointer; cursor: pointer;
img { // border-right: 1px solid pink;
// background-color: #fff;
width: 60px; .header-item {
height: 56px; display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
span {
margin: 5px 0;
font-size: 20px;
color: #fff;
}
&::after {
content: "";
position: absolute;
width: 2px;
height: 66px;
top: 50px;
bottom: 40px;
right: 0;
background-color: rgba(255, 255, 255, 0.54);
}
&:last-child::after {
display: none;
} }
} }
// .header-important ::after {
// content: "";
// width: 2px;
// height: 50px;
// background-color: pink;
// }
} }
.safe { .safe {
// display: flex; // display: flex;
flex-flow: row wrap; flex-flow: row wrap;
width: 100%; width: 100%;
margin: 20px 0; margin: 20px 0;
.labelName {
color: #999;
.el-icon {
margin-right: 10px;
}
}
.safe-contain { .safe-contain {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
color: #666666; color: #666666;
min-height: 169px;
.safe-item { .safe-item {
width: 204px; width: 204px;
height: 169px; height: 169px;

138
src/views/home/index.scss.3742606228
View File

@ -1,138 +0,0 @@
.el-container {
width: 100%;
height: 100%;
.el-header {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
padding: 0 15px 0 0;
background: linear-gradient(to right, #0e63d9 0%, #00378f 100%);
border-bottom: 1px solid #f1f1f1;
.header-lf {
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
.logo {
flex-shrink: 0;
// width: 210px;
margin-left: 16px;
cursor: pointer;
span {
height: 36px;
font-size: 24px;
line-height: 36px;
// font-weight: bold;
color: #dadada;
white-space: nowrap;
}
img {
width: 28px;
object-fit: contain;
margin-right: 6px;
}
}
}
:deep(.tool-bar-lf) {
color: #ffffff;
.el-breadcrumb__inner.is-link {
color: #e5eaf3;
&:hover {
color: var(--el-color-primary);
}
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
color: #cfd3dc;
}
}
:deep(.tool-bar-ri) {
.toolBar-icon,
.username {
color: #e5eaf3;
}
}
}
.el-aside {
width: 200px;
overflow: inherit;
background-color: #ffffff;
border-right: 1px solid var(--el-border-color);
transition: all 0.3s ease;
.menu {
display: flex;
flex-direction: column;
height: 100%;
transition: all 0.3s ease;
.el-menu {
overflow-x: hidden;
border-right: none;
}
}
}
.contain-section {
padding: 30px 135px;
.contain-header {
// color: #fff;
display: flex;
background-color: #008bff;
.header-item {
display: flex;
flex: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: 330px;
height: 170px;
overflow-x: auto;
cursor: pointer;
img {
// background-color: #fff;
width: 60px;
height: 56px;
}
}
}
.safe {
// display: flex;
flex-flow: row wrap;
width: 100%;
margin: 20px 0;
.safe-contain {
display: flex;
flex-wrap: wrap;
color: #666666;
.safe-item {
width: 204px;
height: 169px;
margin: 17px 30px;
// display: flex;
cursor: pointer;
// overflow-x: auto;
background: #ffffff;
border: 1px solid #ebebeb;
border-radius: 4px;
opacity: 1;
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
img {
width: 60px;
height: 56px;
}
}
}
}
}
}
}

8
src/views/home/index.vue
View File

@ -15,15 +15,15 @@
<div class="contain-section"> <div class="contain-section">
<div class="contain-header"> <div class="contain-header">
<div class="header-item" v-for="item in data['important']" :key="item.moduleId"> <div class="header-important" v-for="item in data['important']" :key="item.moduleId">
<div @click="onChange(item)"> <div class="header-item" @click="onChange(item)">
<img :src="getImageUrl(item.moduleIconChecked)" alt="logo" /> <img :src="getImageUrl(item.moduleIconChecked)" alt="logo" />
<p style="color: #fff">{{ item.moduleName }}</p> <span>{{ item.moduleName }}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="safe" v-for="i in labelName" :key="i"> <div class="safe" v-for="i in labelName" :key="i">
<div> <div class="labelName">
<el-icon><ArrowDown /></el-icon> <el-icon><ArrowDown /></el-icon>
<span>{{ i }}</span> <span>{{ i }}</span>
</div> </div>