完成了要事日记数据查看

src/assets/styles/global.css

@@ -858,18 +858,67 @@ body #app .sidebar-container .theme-dark .nest-menu .el-submenu>.el-submenu__tit
   /* text-align: center; */
   text-indent: 2em;
 }
-
-/* 主页左侧导航栏 */
-.nest-menu li{
-  padding-left: 25px !important;
+/* 要事日记数据盒子的位置 */
+#dialoges .el-dialog {
+  width: 528px !important;
+  position: absolute;
+  right: -1300px;
+  top: 100px
 }
-
-/* 统一下拉框背景颜色--input下拉框加类名 */
-.input_xiala{
-  color: #000 !important;
+#dialoges  .jiben {
+  width: 461px !important;
+  height: 32px;
+  background-image: url(/static/img/小标题底.b7c6f45a.png);
+  margin-bottom: 25px;
+  color: #fff;
+  padding-left: 16px;
+  line-height: 32px;
+}
+#dialoges .el-dialog__body{
+  margin: 11px 0px 21px 0;
+  padding-top: 19px !important;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
 }
-.input_xiala:hover{
-  color: #000 !important;
+#dialoges .greeds{
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background-color: #FF4949;
+  margin-right: 8px;
+}
+#dialoges .greed{
+  margin-left: 20px;
+  /* background-color: #fff; */
+  margin-bottom: 14px;
+  margin-right: 40px;
+}
+#dialoges .zuiDa{
+  width: 540px;
+  height: 284px;
+  /* background-color: #fff; */
+  color: #fff;
 }
+#dialoges .red{
+  width: 139px;
+  display: inline-block;
+  /* margin-left: 2px; */
+  /* background-color: #fff; */
+  /* margin-bottom: 14px; */
+  margin-right: 34px;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+#dialoges .boxxx {
+  margin-left: 20px;
+}
+/* #dialoges .red::after{
+  display: inline-block;
+  content: "";
+  width: 10px;
+  height: 10px;
+  background-color: #FF4949;
+  margin-left: -97px;
+} */
 
 

src/views/grassrootsregistration/bdgldiary/index.vue

@@ -52,7 +52,7 @@
             >新增</el-button
           >
         </el-col>
-        <div class="shuJu">
+        <div class="shuJu" @click="dengJI">
           <span class="box44 public"> 当前数据为 : {{ DataTime }}</span>
           <span class="box5 public">
             已登记部门 : {{ registrationData.yiShenPi }}</span
@@ -617,7 +617,6 @@
                     v-model="item1.examineDate"
                     type="datetime"
                     placeholder="选择日期时间"
-                    @change="chenge"
                   >
                   </el-date-picker>
                 </el-form-item>
@@ -734,6 +733,31 @@
           <el-button type="primary" @click="queDing">通过</el-button>
         </div>
       </el-dialog>
+
+      <!-- 数据查看弹出层 -->
+      <el-dialog
+        :visible.sync="dialogVisible"
+        title="统计详情"
+        append-to-body
+        id="dialoges"
+      >
+        <div class="zuiDa">
+          <div class="shuJuTime">当前数据为 ： 2022-03-13</div>
+          <div class="jiben">已登记部门:{{ yishenpi }}个</div>
+          <div class="boxxx">
+            <div v-for="(item, i) in cg" :key="i" class="greed">
+              <span class="greeds"> </span><span>{{ item }}</span>
+            </div>
+          </div>
+          <!-- <span v-for="(item, i) in cg" :key="i" class="greed">{{ item }}</span> -->
+          <div class="jiben">未登记部门:{{ weishenpi }}个</div>
+          <div class="boxxx">
+            <div v-for="(item, i) in sb" :key="i" class="red">
+              <span class="greeds"> </span><span>{{ item }}</span>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -949,8 +973,18 @@ export default {
       DataTime: "",
       //  右边登记数据
       registrationData: {},
-
+      // 搜索时间的保存
       timeDate: "",
+      // 数据查看的弹出层
+      dialogVisible: false,
+      // 获取成功对象
+      cg: {},
+      // 获取失败对象
+      sb: {},
+      // 获取登记部门数量
+      yishenpi: "",
+      // 获取未登记数量
+      weishenpi: "",
     };
   },
 
@@ -962,11 +996,13 @@ export default {
     this.getdict();
     // 获取外部部门树形
     this.treeselect();
+    // 获取数据
     this.getShuJu();
   },
   methods: {
-    chenge(data) {
-      console.log(data);
+    // 点击数据盒子
+    dengJI() {
+      this.dialogVisible = true;
     },
     //审批按钮操作
     handleChakans(row) {
@@ -990,8 +1026,6 @@ export default {
           this.getShuJu(this.timeDate);
           this.$forceUpdate();
         });
-        // this.wordInfo.blogDate = this.wordInfo.blogDate.substring(0, 10);
-        // this.getShuJu(this.wordInfo.blogDate);
       }
     },
     // 获取部门数据
@@ -999,6 +1033,11 @@ export default {
       exportBdgShuju(data).then((res) => {
         this.DataTime = data;
         this.registrationData = res;
+        console.log(res);
+        this.cg = res.cg;
+        this.sb = res.sb;
+        this.yishenpi = res.yiShenPi;
+        this.weishenpi = res.weiShenPi;
       });
     },
     // 搜索时间触发