黔西南大屏
This commit is contained in:
yanran200730
@@ -201,7 +201,6 @@
|
|||||||
<div class="right-right">
|
<div class="right-right">
|
||||||
<AiDvPanel class="bottom" style="width: 410px" border="border6" title="办理排行">
|
<AiDvPanel class="bottom" style="width: 410px" border="border6" title="办理排行">
|
||||||
<ai-table
|
<ai-table
|
||||||
style="margin-top: 10px;"
|
|
||||||
height="890px"
|
height="890px"
|
||||||
:tableData="reportHandleList"
|
:tableData="reportHandleList"
|
||||||
:col-configs="colConfigs2"
|
:col-configs="colConfigs2"
|
||||||
@@ -218,6 +217,73 @@
|
|||||||
</AiDvPanel>
|
</AiDvPanel>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -243,6 +309,8 @@
|
|||||||
currIndex: 0,
|
currIndex: 0,
|
||||||
areaList: [],
|
areaList: [],
|
||||||
type: '0',
|
type: '0',
|
||||||
|
info: {},
|
||||||
|
isShow: false,
|
||||||
gridId: '',
|
gridId: '',
|
||||||
gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
|
gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
|
||||||
chartConfig1: {
|
chartConfig1: {
|
||||||
@@ -539,10 +607,12 @@
|
|||||||
return h(
|
return h(
|
||||||
'p', {
|
'p', {
|
||||||
style: {
|
style: {
|
||||||
color: '#00AAFF'
|
color: '#00AAFF',
|
||||||
|
cursor: 'pointer'
|
||||||
},
|
},
|
||||||
on: {
|
on: {
|
||||||
click: e => {
|
click: e => {
|
||||||
|
this.isShow = true
|
||||||
console.log(params)
|
console.log(params)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -835,6 +905,235 @@
|
|||||||
background: #0c0c0c;
|
background: #0c0c0c;
|
||||||
overflow: hidden;
|
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 {
|
.table-index {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user