diff --git a/packages/bigscreen/dv/AppQxnEventDv.vue b/packages/bigscreen/dv/AppQxnEventDv.vue
index 1fc1183c..a9214db5 100644
--- a/packages/bigscreen/dv/AppQxnEventDv.vue
+++ b/packages/bigscreen/dv/AppQxnEventDv.vue
@@ -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;