黔西南大屏
This commit is contained in:
yanran200730
@@ -201,7 +201,6 @@
|
||||
<div class="right-right">
|
||||
<AiDvPanel class="bottom" style="width: 410px" border="border6" title="办理排行">
|
||||
<ai-table
|
||||
style="margin-top: 10px;"
|
||||
height="890px"
|
||||
:tableData="reportHandleList"
|
||||
:col-configs="colConfigs2"
|
||||
@@ -218,6 +217,73 @@
|
||||
</AiDvPanel>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div class="event-info" v-if="isShow">
|
||||
<div class="info-mask" @click="isShow = false"></div>
|
||||
<div class="info-content">
|
||||
<div class="info-title">
|
||||
<h2>事件详情</h2>
|
||||
</div>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShow = false" />
|
||||
<h3>咨询如何报考摩托车驾驶</h3>
|
||||
<div class="info-wrapper">
|
||||
<div class="info-wrapper__item">
|
||||
<label>办理状态：</label>
|
||||
<span>{{ info['派出所数量'] }}个派出所</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>上报来源：</label>
|
||||
<span>{{ info['群数量'] }}</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>发生地点：</label>
|
||||
<span>{{ info['成员总数'] }}</span>
|
||||
</div>
|
||||
<div class="info-wrapper__item">
|
||||
<label>事件类别：</label>
|
||||
<span>{{ info['群成员数量'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-bottom">
|
||||
<h3>办理流程</h3>
|
||||
<div class="progress">
|
||||
<div class="progress-item active">
|
||||
<h4>已办结</h4>
|
||||
<div class="progress-item__middle">
|
||||
<i></i>
|
||||
</div>
|
||||
<p>王海涛</p>
|
||||
<span>2023-04-08 09:46:47</span>
|
||||
</div>
|
||||
<div class="progress-item active">
|
||||
<h4>已办结</h4>
|
||||
<div class="progress-item__middle">
|
||||
<i></i>
|
||||
</div>
|
||||
<p>王海涛</p>
|
||||
<span>2023-04-08 09:46:47</span>
|
||||
</div>
|
||||
<div class="progress-item active">
|
||||
<h4>已办结</h4>
|
||||
<div class="progress-item__middle">
|
||||
<i></i>
|
||||
</div>
|
||||
<p>王海涛</p>
|
||||
<span>2023-04-08 09:46:47</span>
|
||||
</div>
|
||||
<div class="progress-item active">
|
||||
<h4>已办结</h4>
|
||||
<div class="progress-item__middle">
|
||||
<i></i>
|
||||
</div>
|
||||
<p>王海涛</p>
|
||||
<span>2023-04-08 09:46:47</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -243,6 +309,8 @@
|
||||
currIndex: 0,
|
||||
areaList: [],
|
||||
type: '0',
|
||||
info: {},
|
||||
isShow: false,
|
||||
gridId: '',
|
||||
gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
|
||||
chartConfig1: {
|
||||
@@ -539,10 +607,12 @@
|
||||
return h(
|
||||
'p', {
|
||||
style: {
|
||||
color: '#00AAFF'
|
||||
color: '#00AAFF',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
on: {
|
||||
click: e => {
|
||||
this.isShow = true
|
||||
console.log(params)
|
||||
}
|
||||
},
|
||||
@@ -835,6 +905,235 @@
|
||||
background: #0c0c0c;
|
||||
overflow: hidden;
|
||||
|
||||
.event-info {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 111;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.info-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba($color: #000000, $alpha: 0.1);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 28px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #02FEFF;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 11;
|
||||
width: 498px;
|
||||
height: 430px;
|
||||
padding: 15px 25px 0;
|
||||
background: url(https://cdn.cunwuyun.cn/dvcp/dv/qxn/event-bg.png);
|
||||
background-size: 100% 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.info-bottom {
|
||||
margin-top: 20px;
|
||||
padding-top: 14px;
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 18px;
|
||||
padding: 0 28px;
|
||||
color: #9BB7D4;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
|
||||
.progress-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 78px;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 37px;
|
||||
left: 0%;
|
||||
width: 105px;
|
||||
height: 2px;
|
||||
background: #647886;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&:first-child::after {
|
||||
width: 133px;
|
||||
left: -28px;
|
||||
}
|
||||
|
||||
&:first-child::before {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: -28px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
z-index: 11;
|
||||
background: #647886;
|
||||
border-radius: 50%;
|
||||
content: ' ';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:last-child::before {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
right: -28px;
|
||||
z-index: 11;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #647886;
|
||||
border-radius: 50%;
|
||||
content: ' ';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
h4 {
|
||||
color: rgba(7, 183, 89, 1);
|
||||
}
|
||||
|
||||
&:first-child::before {
|
||||
background: rgba(7, 183, 89, 1);
|
||||
}
|
||||
|
||||
&:last-child::before {
|
||||
background: rgba(7, 183, 89, 1);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: rgba(7, 183, 89, 1);
|
||||
}
|
||||
|
||||
.progress-item__middle {
|
||||
background: rgba(7, 183, 89, 0.4);
|
||||
|
||||
i {
|
||||
background: rgba(7, 183, 89, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 12px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.progress-item__middle {
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-bottom: 11px;
|
||||
border-radius: 50%;
|
||||
background: rgba(47, 140, 232, 0.4);
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #2F8CE8;
|
||||
transform: translate(-50%, -50%);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrapper {
|
||||
margin-top: 18px;
|
||||
|
||||
.info-wrapper__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
margin-bottom: 14px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 70px;
|
||||
margin-right: 20px;
|
||||
color: #9BB7D4;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 18px;
|
||||
z-index: 1;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
transition: all ease 300;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.info-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-index {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user