kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

网格大屏优化

Browse Source
This commit is contained in:
yanran200730
2022-01-25 15:48:12 +08:00
parent d734a5063c
commit 958c7107ce
1 changed files with 111 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
project/dv/apps/AppGridDV.vue
View File

@@ -47,7 +47,7 @@
<ai-echart
style="height: 100%; width: 100%;"
:data="userInfo"
:ops="pieChart">
:ops="barChart1">
</ai-echart>
</div>
</div>
@@ -92,6 +92,7 @@
<script>
import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
import barChart1 from 'dvcp-dv-ui/components/AiEchart/template/bar/barChart1'
import { VueOkrTree } from 'vue-okr-tree'
import 'vue-okr-tree/dist/vue-okr-tree.css'
@@ -113,6 +114,7 @@
size: 100,
current: 1
},
barChart1,
userInfo: [],
eventInfo: [],
pieChart,
@@ -254,6 +256,8 @@
renderContent (h, node) {
return h('div', {
class: 'userlist-container'
}, [h('div', {
class: `userlist ${node.data.label === '子节点' ? 'last-level' : ''} ${node.data.girdLevel > 1 ? 'userlist-wrapper' : ''} userlist-${node.data.girdLevel}`
}, node.data.userList.map(v => {
return h('div', {
@@ -286,13 +290,17 @@
}, v.label), h('span', {
class: 'user-span',
style: {
display: v.girdLevel === '2' ? 'block' : 'none',
fontSize: v.girdLevel === '2' ? '12px' : ''
},
attrs: {
title: v.girdLevel === '2' ? (v.checkType === '1' ? '网格员' : '网格长') : v.girdName
}
}, v.girdLevel === '2' ? (v.checkType === '1' ? '网格员' : '网格长') : v.girdName)])
}))
})), h('div', {
display: node.data.girdLevel < '2' ? 'block' : 'none',
style: 'color: rgba(255, 255, 255, 0.8); font-weight: 500; font-size: 12px; margin: 4px 0;'
}, node.data.label)])
},
getResidentInfo (id) {
@@ -446,17 +454,16 @@
display: flex;
align-items: center;
height: 100%;
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 6px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
border-radius: 5px;
background: rgba(93, 163, 255, 0.1);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgba(173, 208, 255, 0.5);
@@ -545,116 +552,117 @@
}
}
::v-deep .userlist {
display: flex;
align-items: center;
&.userlist-wrapper {
::v-deep .userlist-container{
.userlist {
display: flex;
align-items: center;
padding: 10px;
background: rgba(76, 166, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.user-item {
margin-right: 10px;
color: #fff;
font-size: 0;
&:last-child {
margin-right: 0;
}
img {
width: 58px;
height: 80px;
object-fit: cover;
user-select: none;
}
p {
max-width: 120px;
margin: 4px 0;
font-size: 19px;
text-align: center;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
span {
display: block;
max-width: 120px;
font-size: 17px;
color: #9DD3FF;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
&.user-item-0 {
img {
width: 86px;
height: 120px;
}
}
&.user-item-2 {
p {
font-size: 12px;
margin-bottom: 0;
}
img {
width: 40px;
height: 56px;
}
}
}
&.userlist-2 {
justify-content: space-between;
max-width: 130px;
flex-wrap: wrap;
padding-bottom: 0;
.user-item {
width: 48px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
margin-bottom: 10px;
&:nth-of-type(2n) {
margin-right: 10px;
color: #fff;
font-size: 0;
&:last-child {
margin-right: 0;
}
}
}
&.last-level {
flex-wrap: wrap;
max-width: 690px;
font-size: 0;
background: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 12px 12px 0 12px;
box-sizing: border-box;
img {
width: 58px;
height: 80px;
object-fit: cover;
user-select: none;
}
.user-item {
margin-bottom: 12px;
p {
max-width: 120px;
margin: 4px 0;
font-size: 19px;
text-align: center;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
span {
display: block;
max-width: 120px;
font-size: 17px;
color: #9DD3FF;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
&.user-item-0 {
img {
width: 86px;
height: 120px;
}
}
&.user-item-2 {
p {
font-size: 12px;
margin-bottom: 0;
}
img {
width: 40px;
height: 56px;
}
}
}
img {
display: none;
&.userlist-2 {
justify-content: space-between;
max-width: 130px;
flex-wrap: wrap;
padding-bottom: 0;
width: fit-content;
margin: 0 auto;
.user-item {
width: 48px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
margin-bottom: 10px;
&:nth-of-type(2n) {
margin-right: 0;
}
}
}
p {
padding: 8px;
font-size: 12px;
background: #0B477D;
border-radius: 4px;
}
&.last-level {
flex-wrap: wrap;
max-width: 690px;
font-size: 0;
background: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 12px 12px 0 12px;
box-sizing: border-box;
span {
display: none!important;
.user-item {
margin-bottom: 12px;
}
img {
display: none;
}
p {
padding: 8px;
font-size: 12px;
background: #0B477D;
border-radius: 4px;
}
span {
display: none!important;
}
}
}
}
@@ -703,6 +711,7 @@
.right-chart {
height: calc(100% - 82px);
padding: 0 20px;
}
}
}