diff --git a/src/assets/images/shuju/overview/.png b/src/assets/images/shuju/overview/.png
new file mode 100644
index 000000000..f4d6325bc
Binary files /dev/null and b/src/assets/images/shuju/overview/.png differ
diff --git a/src/assets/images/shuju/overview/box-bg.png b/src/assets/images/shuju/overview/box-bg.png
new file mode 100644
index 000000000..18555cb9c
Binary files /dev/null and b/src/assets/images/shuju/overview/box-bg.png differ
diff --git a/src/assets/images/shuju/overview/title-bg.png b/src/assets/images/shuju/overview/title-bg.png
index f4d6325bc..84a42de47 100644
Binary files a/src/assets/images/shuju/overview/title-bg.png and b/src/assets/images/shuju/overview/title-bg.png differ
diff --git a/src/assets/scss/dataBoard/overview/index.scss b/src/assets/scss/dataBoard/overview/index.scss
index 0e67501b5..c45e6ae61 100644
--- a/src/assets/scss/dataBoard/overview/index.scss
+++ b/src/assets/scss/dataBoard/overview/index.scss
@@ -36,14 +36,18 @@
 .m-map {
 	position: relative;
 	width: 100%;
-	height: 690px;
+	height: 970px;
 	margin-bottom: 10px;
 }
 
 
 .m-box {
 	width: 460px;
-	background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(46, 164, 255, 0) 100%);
+	// background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(46, 164, 255, 0) 100%);
+	background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat;
+	background-size: 100% 100%;
+	margin-top: 5px;
+
 }
 
 .m-rybox {
diff --git a/src/views/dataBoard/overview/components/jdjs.vue b/src/views/dataBoard/overview/components/jdjs.vue
index 18072f127..92d3dceeb 100644
--- a/src/views/dataBoard/overview/components/jdjs.vue
+++ b/src/views/dataBoard/overview/components/jdjs.vue
@@ -8,7 +8,7 @@
         {{ overview }}
       </div>
     </div>
-    <div class="m-jdjs-bg">
+    <!-- <div class="m-jdjs-bg">
       <div class="m-jdjs-bg-title">
         <div class="m-jdjs-bg-title-img">
           <img src="../../../../assets/images/shuju/overview/zjbg-icon.png" />
@@ -18,7 +18,7 @@
       <div class="m-jdjs-bg-txt">
         {{ report }}
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script>
diff --git a/src/views/dataBoard/overview/index.vue b/src/views/dataBoard/overview/index.vue
index 5d1c9e26d..95cfac18b 100644
--- a/src/views/dataBoard/overview/index.vue
+++ b/src/views/dataBoard/overview/index.vue
@@ -25,7 +25,7 @@
           </div>
           <grid-map ref="map" @clickAgency="clickAgencyItem" :srcGridData="orgData" @clickDotBtn="handleClickDotBtn" :level="currentLevel" :peopleType="peopleType" />
         </div>
-        <div class="m-box m-rybox">
+        <!-- <div class="m-box m-rybox">
           <title-box :text="`${customerName}${peopleList[peopleType]}`">
             <div class="up-style" style="width: 51%">
               <div>
@@ -35,7 +35,7 @@
             </div>
           </title-box>
           <jdwgy v-show="listShow" :peopleType="peopleType" :currentLevelData="currentLevelData" :level="currentLevel" @setNum="setNum" @setPoint="setPoint" />
-        </div>
+        </div> -->
       </div>
 
       <div class="g-right">
diff --git a/src/views/dataBoard/satisfactionEval/components/Title/index.vue b/src/views/dataBoard/satisfactionEval/components/Title/index.vue
index aaa0c6b6e..3f8e1168d 100644
--- a/src/views/dataBoard/satisfactionEval/components/Title/index.vue
+++ b/src/views/dataBoard/satisfactionEval/components/Title/index.vue
@@ -29,8 +29,8 @@ export default {
   // width: 100%;
   height: 40px;
   background: url(../../../../../assets/images/shuju/overview/title-bg.png) no-repeat;
-  // background-size: 100% 100%;
-  padding: 8px 16px 8px 32px;
+  background-size: 100% 100%;
+  padding: 8px 16px 8px 45px;
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/src/views/dataBoardMain/main-navbar.vue b/src/views/dataBoardMain/main-navbar.vue
index 5d5a65615..5659522b0 100644
--- a/src/views/dataBoardMain/main-navbar.vue
+++ b/src/views/dataBoardMain/main-navbar.vue
@@ -29,7 +29,7 @@
     </div>-->
     <div class="nav-list">
       <div class="nav-item" :class="{ 'z-on': $route.path.indexOf('/dataBoard/overview') != -1 }" @click="toPage('/dataBoard/overview/index')">
-        <span>概览</span>
+        <span>书记看板</span>
       </div>
       <div class="nav-item" :class="{ 'z-on': $route.path.includes('/organizational') }" @click="toPage('/organizational/dangTree')">
         <span>组织架构</span>
diff --git a/src/views/modules/satisfaction/communitySelfInsp/index.vue b/src/views/modules/satisfaction/communitySelfInsp/index.vue
index ec64e1511..a131230a9 100644
--- a/src/views/modules/satisfaction/communitySelfInsp/index.vue
+++ b/src/views/modules/satisfaction/communitySelfInsp/index.vue
@@ -1,101 +1,609 @@
 
 <template>
-    <div class="g-main">
-        <div>
-            <div class="m-search">
-                <el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'">
-                    <el-form-item label="自评周期">
-                        <el-date-picker v-model="formData.period" type="month" value-format="yyyy-MM" placeholder="选择日期"
-                            style="width: 202px" clearable>
-                        </el-date-picker>
-                    </el-form-item>
-                    <div style="float: right; margin-top:5px">
-                        <el-button style="margin-left: 30px" size="small" type="primary "
-                            @click="handleSearch">查询</el-button>
-                        <el-button style="margin-left: 10px" is-plain class="diy-button--white el-button--default"
-                            size="small" @click="resetSearch">重置</el-button>
-                    </div>
-                </el-form>
-
-            </div>
+  <div class="g-main">
+    <div>
+      <div class="m-search">
+        <el-form
+          :inline="true"
+          :model="formData"
+          ref="ref_searchform"
+          :label-width="'100px'"
+        >
+          <el-form-item label="自评周期">
+            <el-date-picker
+              v-model="formData.period"
+              type="month"
+              value-format="yyyy-MM"
+              placeholder="选择日期"
+              style="width: 202px"
+              clearable
+            >
+            </el-date-picker>
+          </el-form-item>
+          <div style="float: right; margin-top: 5px">
+            <el-button
+              style="margin-left: 30px"
+              size="small"
+              type="primary "
+              @click="handleSearch"
+              >查询</el-button
+            >
+            <el-button
+              style="margin-left: 10px"
+              is-plain
+              class="diy-button--white el-button--default"
+              size="small"
+              @click="resetSearch"
+              >重置</el-button
+            >
+          </div>
+        </el-form>
+      </div>
 
-            <div class="m-table">
-                <div class="div_btn" v-if="btnFlag">
-                    <el-button type="primary" size="small" class="diy-button--white el-button--default"
-                        @click="handleCreateMonthlySurvey">生成本月社区自查问卷表</el-button>
-                </div>
-                <div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
-                    <div>本月已参与调研人数 {{ personQty }}人</div>
-                    <section class="content_box">
-                        <div class="left">
-                            <img src="../../../../assets/img/satisfaction/zhdf.png" alt="Image">
-                            <div class="left_right">
-                                <div>{{ synthesisScore }}</div>
-                                <div>综合得分</div>
-                            </div>
-                            <div class="right_box">
-                                        <div :class="synthesisState?'up':'down'">
-                                            <img src="@/assets/images/index/up.png" alt="" v-if="synthesisState && synthesisScoreBtLastMonth!=0" >
-                                            <img src="@/assets/images/index/down.png" alt="" v-if="!synthesisState && synthesisScoreBtLastMonth!=0" >
-                                            <span >{{synthesisScoreBtLastMonth}}</span>
-                                        </div>
-                                        <div style="color: #999;">较上月</div>
-                                    </div>
-                        </div>
-                        <div class="right">
-                            <div class="box" v-for="(item, index) in score" :key="index">
-                                <div class="card">
-                                    <img :src="item.imgUrl" alt="Image">
-                                    <div class="right_right">
-                                        <div>{{ item.score }}</div>
-                                        <div>{{ item.satisfactionCategoryName }}</div>
-                                    </div>
-                                    <div class="right_box">
-                                        <div>
-                                            <img src="@/assets/images/index/up.png" alt="" v-if="item.state && item.scoreDiffBtLastMonth!=0" >
-                                            <img src="@/assets/images/index/down.png" alt="" v-if="!item.state && item.scoreDiffBtLastMonth!=0" >
-                                            <span :class="item.state?'up':'down'">{{item.scoreDiffBtLastMonth}}</span>
-                                        </div>
-                                        <div style="color: #999;">较上月</div>
-                                    </div>
-                                </div>
-                            </div>
-
-                        </div>
-                    </section>
-                    <div id="myCharts"></div>
-                </div>
-                <div>
+      <div class="m-table">
+        <div class="div_btn" v-if="btnFlag">
+          <el-button
+            type="primary"
+            size="small"
+            class="diy-button--white el-button--default"
+            @click="handleCreateMonthlySurvey"
+            >生成本月社区自查问卷表</el-button
+          >
+        </div>
+        <div
+          class="m-table-item"
+          :style="{ height: maxTableHeight + 'px', width: '100%' }"
+        >
+          <div>本月已参与调研人数 {{ personQty }}人</div>
+          <section class="content_box">
+            <div class="left">
+              <img
+                src="../../../../assets/img/satisfaction/zhdf.png"
+                alt="Image"
+              />
+              <div class="left_right">
+                <div>{{ synthesisScore }}</div>
+                <div>综合得分</div>
+              </div>
+              <div class="right_box">
+                <div :class="synthesisState ? 'up' : 'down'">
+                  <img
+                    src="@/assets/images/index/up.png"
+                    alt=""
+                    v-if="synthesisState && synthesisScoreBtLastMonth != 0"
+                  />
+                  <img
+                    src="@/assets/images/index/down.png"
+                    alt=""
+                    v-if="
+                      !synthesisState &&
+                      synthesisScoreBtLastMonth != 0 &&
+                      synthesisScoreBtLastMonth != null
+                    "
+                  />
+                  <span>{{ synthesisScoreBtLastMonth }}</span>
                 </div>
+                <div style="color: #999">较上月</div>
+              </div>
             </div>
-        </div>
-        <el-dialog v-if="showFormList && user.level == 'community'" :visible.sync="showFormList" :close-on-click-modal="false"
-            :close-on-press-escape="false" title="社区自查" :modal-append-to-body="false" width="820px" top="5vh"
-            class="dialog-h" @closed="showFormList = false">
-            <form-list ref="ref_add_form" @handleClose="handleClose" :satisfactionCategoryStr="satisfactionCategoryStr"
-                @handelDetail="handelDetail" @handelFollowUpList="handelFollowUpList" :period="formData.period" :seriesName="seriesName" :inspRecordId="inspRecordId"></form-list>
-            <el-dialog width="920px" class="dialog-h" title="社区自查报告详情" :close-on-click-modal="false"
-                v-if="showFollowUpDetail" :visible.sync="showFollowUpDetail" append-to-body>
-                <follow-Detail :period="formData.period" :inspResultId="inspResultId" @handleClose="showFollowUpDetail = false"></follow-Detail>
-            </el-dialog>
-            <el-dialog width="820px" class="dialog-h" title="回访记录" :close-on-click-modal="false" v-if="showFollowUpList"
-                :visible.sync="showFollowUpList" append-to-body>
-                <follow-list :id="inspResultId"></follow-list>
-            </el-dialog>
-        </el-dialog>
-        <el-dialog title="调查问卷" :visible.sync="showTduckImage" width="550px">
-            <el-image :src="qrCodeImgUrl">
-                <div slot="placeholder" class="image-slot">
-                    加载中<span class="dot">...</span>
+            <div class="right">
+              <div class="box" v-for="(item, index) in score" :key="index">
+                <div class="card">
+                  <img :src="item.imgUrl" alt="Image" />
+                  <div class="right_right">
+                    <div>{{ item.score }}</div>
+                    <div>{{ item.satisfactionCategoryName }}</div>
+                  </div>
+                  <div class="right_box">
+                    <div>
+                      <img
+                        src="@/assets/images/index/up.png"
+                        alt=""
+                        v-if="item.state && item.scoreDiffBtLastMonth != 0"
+                      />
+                      <img
+                        src="@/assets/images/index/down.png"
+                        alt=""
+                        v-if="!item.state && item.scoreDiffBtLastMonth != 0"
+                      />
+                      <span :class="item.state ? 'up' : 'down'">{{
+                        item.scoreDiffBtLastMonth
+                      }}</span>
+                    </div>
+                    <div style="color: #999">较上月</div>
+                  </div>
                 </div>
-            </el-image>
-            <div>
-                <span>问卷链接：</span> {{ questionnaireUrl }}
+              </div>
+            </div>
+          </section>
+
+          <section class="bto-box">
+            <div id="myCharts" v-if="user.level != 'street'"></div>
+            <div v-else class="f-top16">
+              <el-table :data="tableList" :height="tabHeight" border align="center">
+                <el-table-column label="序号" type="index" width="80" />
+                <el-table-column
+                  label="社区"
+                  show-overflow-tooltip
+                  prop="agencyName"
+                  width="200"
+                >
+                </el-table-column>
+                <el-table-column
+                  label="参与调研人数"
+                  prop="personQty"
+                  width="150"
+                >
+                </el-table-column>
+                <el-table-column
+                  label="综合得分"
+                  prop="synthesisScore"
+                  width="150"
+                  align="center"
+                >
+                <template slot-scope="scope">
+                    <div class="f-flex">
+                      <span class="down f-right8">{{
+                        scope.row.synthesisScore
+                      }}</span>
+                      <div>
+                        <img
+                          src="@/assets/images/index/up.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.synthesisScoreDiffBtLastMonth >
+                              0 &&
+                            scope.row.synthesisScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <img
+                          src="@/assets/images/index/down.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.synthesisScoreDiffBtLastMonth <
+                              0 &&
+                            scope.row.synthesisScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <span class="gray">{{
+                          scope.row.synthesisScoreDiffBtLastMonth < 0
+                            ? Math.abs(
+                                scope.row.synthesisScoreDiffBtLastMonth
+                              )
+                            : scope.row.synthesisScoreDiffBtLastMonth
+                        }}</span>
+                      </div>
+                    </div>
+                </template>
+                </el-table-column>
+                <el-table-column
+                  label="文化设施"
+                  prop="culturalFacilityScore"
+                  width="150"
+                >
+                  <template slot-scope="scope">
+                    <div class="f-flex">
+                      <span class="down f-right8">{{
+                        scope.row.culturalFacilityScore
+                      }}</span>
+                      <div>
+                        <img
+                          src="@/assets/images/index/up.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.culturalFacilityScoreDiffBtLastMonth >
+                              0 &&
+                            scope.row.culturalFacilityScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <img
+                          src="@/assets/images/index/down.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.culturalFacilityScoreDiffBtLastMonth <
+                              0 &&
+                            scope.row.culturalFacilityScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <span class="gray">{{
+                          scope.row.culturalFacilityScoreDiffBtLastMonth < 0
+                            ? Math.abs(
+                                scope.row.culturalFacilityScoreDiffBtLastMonth
+                              )
+                            : scope.row.culturalFacilityScoreDiffBtLastMonth
+                        }}</span>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="基础教育"
+                  prop="basicEducation"
+                  width="150"
+                >
+                  <template slot-scope="scope">
+                    <div class="f-flex">
+                      <span class="down f-right8">{{
+                        scope.row.basicEducationScore
+                      }}</span>
+                      <div>
+                        <img
+                          src="@/assets/images/index/up.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.basicEducationScoreDiffBtLastMonth >
+                              0 &&
+                            scope.row.basicEducationScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <img
+                          src="@/assets/images/index/down.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.basicEducationScoreDiffBtLastMonth <
+                              0 &&
+                            scope.row.basicEducationScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <span class="gray">{{
+                          scope.row.basicEducationScoreDiffBtLastMonth < 0
+                            ? Math.abs(
+                                scope.row.basicEducationScoreDiffBtLastMonth
+                              )
+                            : scope.row.basicEducationScoreDiffBtLastMonth
+                        }}</span>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="体育设施"
+                  prop="sportsFacility"
+                  width="150"
+                >
+                  <template slot-scope="scope">
+                    <div class="f-flex">
+                      <span class="down f-right8">{{
+                        scope.row.sportsFacilityScore
+                      }}</span>
+                      <div>
+                        <img
+                          src="@/assets/images/index/up.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.sportsFacilityScoreDiffBtLastMonth >
+                              0 &&
+                            scope.row.sportsFacilityScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <img
+                          src="@/assets/images/index/down.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.sportsFacilityScoreDiffBtLastMonth <
+                              0 &&
+                            scope.row.sportsFacilityScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <span class="gray">{{
+                          scope.row.sportsFacilityScoreDiffBtLastMonth < 0
+                            ? Math.abs(
+                                scope.row.sportsFacilityScoreDiffBtLastMonth
+                              )
+                            : scope.row.sportsFacilityScoreDiffBtLastMonth
+                        }}</span>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="生态环境"
+                  prop="ecologicalEnv"
+                  width="150"
+                >
+                  <template slot-scope="scope">
+                    <div class="f-flex">
+                      <span class="down f-right8">{{
+                        scope.row.ecologicalEnvScore
+                      }}</span>
+                      <div>
+                        <img
+                          src="@/assets/images/index/up.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.ecologicalEnvScoreDiffBtLastMonth >
+                              0 &&
+                            scope.row.ecologicalEnvScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <img
+                          src="@/assets/images/index/down.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.ecologicalEnvScoreDiffBtLastMonth <
+                              0 &&
+                            scope.row.ecologicalEnvScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <span class="gray">{{
+                          scope.row.ecologicalEnvScoreDiffBtLastMonth < 0
+                            ? Math.abs(
+                                scope.row.ecologicalEnvScoreDiffBtLastMonth
+                              )
+                            : scope.row.ecologicalEnvScoreDiffBtLastMonth
+                        }}</span>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="社会治安"
+                  prop="socialSecurity"
+                  width="150"
+                >
+                  <template slot-scope="scope">
+                    <div class="f-flex">
+                      <span class="down f-right8">{{
+                        scope.row.socialSecurityScore
+                      }}</span>
+                      <div>
+                        <img
+                          src="@/assets/images/index/up.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.socialSecurityScoreDiffBtLastMonth >
+                              0 &&
+                            scope.row.socialSecurityScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <img
+                          src="@/assets/images/index/down.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.socialSecurityScoreDiffBtLastMonth <
+                              0 &&
+                            scope.row.socialSecurityScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <span class="gray">{{
+                          scope.row.socialSecurityScoreDiffBtLastMonth < 0
+                            ? Math.abs(
+                                scope.row.socialSecurityScoreDiffBtLastMonth
+                              )
+                            : scope.row.socialSecurityScoreDiffBtLastMonth
+                        }}</span>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="社会救助"
+                  prop="socialAssistance"
+                  width="150"
+                >
+                  <template slot-scope="scope">
+                    <div class="f-flex">
+                      <span class="down f-right8">{{
+                        scope.row.socialAssistanceScore
+                      }}</span>
+                      <div>
+                        <img
+                          src="@/assets/images/index/up.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.socialAssistanceScoreDiffBtLastMonth >
+                              0 &&
+                            scope.row.socialAssistanceScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <img
+                          src="@/assets/images/index/down.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.socialAssistanceScoreDiffBtLastMonth <
+                              0 &&
+                            scope.row.socialAssistanceScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <span class="gray">{{
+                          scope.row.socialAssistanceScoreDiffBtLastMonth < 0
+                            ? Math.abs(
+                                scope.row.socialAssistanceScoreDiffBtLastMonth
+                              )
+                            : scope.row.socialAssistanceScoreDiffBtLastMonth
+                        }}</span>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="老有所养"
+                  prop="oldPeopleProvide"
+                  width="150"
+                >
+                  <template slot-scope="scope">
+                    <div class="f-flex">
+                      <span class="down f-right8">{{
+                        scope.row.oldPeopleProvideScore
+                      }}</span>
+                      <div>
+                        <img
+                          src="@/assets/images/index/up.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.oldPeopleProvideScoreDiffBtLastMonth >
+                              0 &&
+                            scope.row.oldPeopleProvideScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <img
+                          src="@/assets/images/index/down.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.oldPeopleProvideScoreDiffBtLastMonth <
+                              0 &&
+                            scope.row.oldPeopleProvideScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <span class="gray">{{
+                          scope.row.oldPeopleProvideScoreDiffBtLastMonth < 0
+                            ? Math.abs(
+                                scope.row.oldPeopleProvideScoreDiffBtLastMonth
+                              )
+                            : scope.row.oldPeopleProvideScoreDiffBtLastMonth
+                        }}</span>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column label="病有所医" prop="medical" width="150" >
+                    <template slot-scope="scope">
+                    <div class="f-flex">
+                      <span class="down f-right8">{{
+                        scope.row.medicalScore
+                      }}</span>
+                      <div>
+                        <img
+                          src="@/assets/images/index/up.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.medicalScoreDiffBtLastMonth >
+                              0 &&
+                            scope.row.medicalScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <img
+                          src="@/assets/images/index/down.png"
+                          width="10px"
+                          height="14px"
+                          v-if="
+                            scope.row.medicalScoreDiffBtLastMonth <
+                              0 &&
+                            scope.row.medicalScoreDiffBtLastMonth != 0
+                          "
+                        />
+                        <span class="gray">{{
+                          scope.row.medicalScoreDiffBtLastMonth < 0
+                            ? Math.abs(
+                                scope.row.medicalScoreDiffBtLastMonth
+                              )
+                            : scope.row.medicalScoreDiffBtLastMonth
+                        }}</span>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="操作"
+                  width="90"
+                  align="center"
+                  fixed="right"
+                >
+                  <template slot-scope="data">
+                    <el-button type="text" @click="handleView(data.row)"
+                      >查看</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <el-row type="flex">
+                <el-col :span="12" align="left">
+                  <div style="margin-top: 25px">共{{ total }}条</div>
+                </el-col>
+                <el-col :span="12" align="right">
+                  <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :current-page.sync="pageNo"
+                    :page-size="pageSize"
+                    layout="prev, pager, next,jumper"
+                    :total="total"
+                  >
+                  </el-pagination
+                ></el-col>
+              </el-row>
             </div>
-            <span slot="footer" class="dialog-footer">
-            </span>
-        </el-dialog>
+          </section>
+        </div>
+        <div></div>
+      </div>
     </div>
+    <el-dialog
+      v-if="showFormList && user.level == 'community'"
+      :visible.sync="showFormList"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="社区自查"
+      :modal-append-to-body="false"
+      width="820px"
+      top="5vh"
+      class="dialog-h"
+      @closed="showFormList = false"
+    >
+      <form-list
+        ref="ref_add_form"
+        @handleClose="handleClose"
+        :satisfactionCategoryStr="satisfactionCategoryStr"
+        @handelDetail="handelDetail"
+        @handelFollowUpList="handelFollowUpList"
+        :period="formData.period"
+        :seriesName="seriesName"
+        :inspRecordId="inspRecordId"
+      ></form-list>
+      <el-dialog
+        width="920px"
+        class="dialog-h"
+        title="社区自查报告详情"
+        :close-on-click-modal="false"
+        v-if="showFollowUpDetail"
+        :visible.sync="showFollowUpDetail"
+        append-to-body
+      >
+        <follow-Detail
+          :period="formData.period"
+          :inspResultId="inspResultId"
+          @handleClose="showFollowUpDetail = false"
+        ></follow-Detail>
+      </el-dialog>
+      <el-dialog
+        width="820px"
+        class="dialog-h"
+        title="回访记录"
+        :close-on-click-modal="false"
+        v-if="showFollowUpList"
+        :visible.sync="showFollowUpList"
+        append-to-body
+      >
+        <follow-list :id="inspResultId"></follow-list>
+      </el-dialog>
+    </el-dialog>
+    <el-dialog title="调查问卷" :visible.sync="showTduckImage" width="550px">
+      <el-image :src="qrCodeImgUrl">
+        <div slot="placeholder" class="image-slot">
+          加载中<span class="dot">...</span>
+        </div>
+      </el-image>
+      <div><span>问卷链接：</span> {{ questionnaireUrl }}</div>
+      <span slot="footer" class="dialog-footer"> </span>
+    </el-dialog>
+  </div>
 </template>
 <script>
 import { requestPost, requestGet } from "@/js/dai/request";
@@ -107,299 +615,369 @@ import followDetail from "./followUpDetail";
 import util from "@js/util.js";
 
 export default {
-    components: { formList, followList, followDetail },
+  components: { formList, followList, followDetail },
+
+  data() {
+    return {
+      searchH: 20,
+
+      formData: {
+        period: "", //月份
+      },
+      inspRecordId: "",
 
-    data() {
-        return {
-            searchH: 20,
+      multiSelection: [], // 多选结果
+
+      dicts: {
+        satisfaction_category: [],
+      }, //字典对象
+
+      myChart: {},
+      option: {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["满意", "基本满意", "不满意"],
+          bottom: "10%",
+          icon: "rect",
+          itemWidth: 20,
+          itemHeight: 5,
+          itemGap: 20,
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "25%",
+          containLabel: true,
+        },
+        toolbox: {},
+
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          data: [], // 请将yourDataArray替换为您的x轴数据数组
+          splitLine: {
+            show: true,
+            lineStyle: {
+              width: 60, // 设置阴影的宽度
+              color: "#000",
+              opacity: 0,
+            },
+            // 控制间隔，这里设置为2表示左右两侧有间隔，可以根据需要调整
+          },
+        },
 
-            formData: {
-                period: "",//月份
+        yAxis: {
+          type: "value",
+          name: "单位(个)",
+          min: 0,
+        },
+        series: [
+          {
+            name: "满意",
+            type: "bar",
+            data: [],
+            barWidth: 16, // 设置柱子宽度
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#2c7cf2" }, // 从顶部开始
+                { offset: 1, color: "#80b3ff" }, // 到底部结束
+              ]),
             },
-            inspRecordId: "",
-
-            multiSelection: [], // 多选结果
-
-            dicts: {
-                satisfaction_category: [],
-            }, //字典对象
-
-            myChart: {},
-            option: {
-                tooltip: {
-                    trigger: "axis",
-                },
-                legend: {
-                    data: ["满意", "基本满意", "不满意"],
-                    bottom: "10%",
-                    icon: "rect",
-                    itemWidth: 20,
-                    itemHeight: 5,
-                    itemGap: 20,
-                },
-                grid: {
-                    left: "3%",
-                    right: "4%",
-                    bottom: "25%",
-                    containLabel: true,
-                },
-                toolbox: {},
-
-                xAxis: {
-                    type: "category",
-                    boundaryGap: true,
-                    axisLine: {
-                        show: true
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    data: [], // 请将yourDataArray替换为您的x轴数据数组
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            width: 60, // 设置阴影的宽度
-                            color: "#000",
-                            opacity: 0
-                        },
-                        // 控制间隔，这里设置为2表示左右两侧有间隔，可以根据需要调整
-                    },
-
-                },
-
-
-                yAxis: {
-                    type: "value",
-                    name: "单位(个)",
-                    min: 0,
-
-                },
-                series: [
-                    {
-                        name: "满意",
-                        type: "bar",
-                        data: [],
-                        barWidth: 16, // 设置柱子宽度
-                        itemStyle: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                                { offset: 0, color: "#2c7cf2" }, // 从顶部开始
-                                { offset: 1, color: "#80b3ff" }, // 到底部结束
-                            ]),
-                        },
-                    },
-                    {
-                        name: "基本满意",
-                        type: "bar",
-                        data: [],
-                        barWidth: 16, // 设置柱子宽度
-                        itemStyle: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                                { offset: 0, color: "#3ca267" }, // 从顶部开始
-                                { offset: 1, color: "#82cca0" }, // 到底部结束
-                            ]),
-                        },
-                    },
-                    {
-                        name: "不满意",
-                        type: "bar",
-                        data: [],
-                        barWidth: 16, // 设置柱子宽度
-                        itemStyle: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                                { offset: 0, color: "#edb42d" }, // 从顶部开始
-                                { offset: 1, color: "#ffd981" }, // 到底部结束
-                            ]),
-                        },
-                    },
-                ],
+          },
+          {
+            name: "基本满意",
+            type: "bar",
+            data: [],
+            barWidth: 16, // 设置柱子宽度
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#3ca267" }, // 从顶部开始
+                { offset: 1, color: "#82cca0" }, // 到底部结束
+              ]),
             },
+          },
+          {
+            name: "不满意",
+            type: "bar",
+            data: [],
+            barWidth: 16, // 设置柱子宽度
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#edb42d" }, // 从顶部开始
+                { offset: 1, color: "#ffd981" }, // 到底部结束
+              ]),
+            },
+          },
+        ],
+      },
+
+      satisfactionCategory: [], //类目
+      satisfactionCategoryName: [],
+      score: [], //得分
 
-            satisfactionCategory: [],//类目
-            satisfactionCategoryName: [],
-            score: [], //综合得分
+      showFormList: false, //自查列表弹框
+      showFollowUpDetail: false, //自查列表中查看弹框
+      showFollowUpList: false, //回访记录弹框
+      showTduckImage: false,
 
-            showFormList: false, //自查列表弹框
-            showFollowUpDetail: false,//自查列表中查看弹框
-            showFollowUpList: false,//回访记录弹框
-            showTduckImage: false,
+      qrCodeImgUrl: "", //生成二维码图片链接
+      questionnaireUrl: "", //问卷调查链接
 
-            qrCodeImgUrl: '',//生成二维码图片链接
-            questionnaireUrl: '',
-            synthesisScore: '',
-            personQty: '',
+      synthesisScore: "", //综合得分
+      synthesisState: false, //综合得分状态
+      synthesisScoreBtLastMonth: null, //综合得分对比上月
+      personQty: "", //人数
 
-            inspResultId:"",
+      inspResultId: "",
 
-            btnFlag:true,
+      btnFlag: true, //生成调查问卷按钮权限(非社区账号)
 
-            synthesisState:false,
-            synthesisScoreBtLastMonth:null,
-        };
+      user: {},
+
+      tableList: [],
+
+      total: 0,
+      pageNo: 1,
+      pageSize: 20,
+    };
+  },
+  computed: {
+    maxTableHeight() {
+      let num = this.user.level == "street" ? 50 : 0;
+      const _h = this.clientHeight - 260 - this.searchH - num;
+      return _h;
     },
-    computed: {
-        maxTableHeight() {
-            const h = this.clientHeight - this.searchH - 330 + this.iframeHeight;
-            const _h = this.clientHeight - 330 - this.searchH;
-            return this.$store.state.inIframe ? h : _h;
-        },
-        ...mapGetters(["clientHeight", "iframeHeight"]),
+    tabHeight() {
+      const _h = this.clientHeight - 600;
+      return _h;
     },
-    watch: {},
-    async mounted() {
-        this.user = this.$store.state.user;
-        this.agencyId = this.user.agencyId;
-        if(this.user.level != 'community'){
-            this.btnFlag = false
+    ...mapGetters(["clientHeight", "iframeHeight"]),
+  },
+  watch: {},
+  async mounted() {
+    this.user = this.$store.state.user;
+    this.agencyId = this.user.agencyId;
+    if (this.user.level != "community") {
+      this.btnFlag = false;
+    }
+    await this.getDicts();
+    await this.initData();
+    if (this.user.level != "street") {
+      this.initEcharts();
+    }
+  },
+  created() {
+    let date = new Date();
+    this.formData.period = util.formatDate(date, "yyyy-MM");
+  },
+  activated() {
+    // this.handleWindowResize();
+  },
+  methods: {
+    // ------------------------------------字典------------------------------------------
+    async getDicts() {
+      try {
+        const requests = [
+          this.$http.post("sys/dict/data/dictlist", {
+            dictType: "satisfaction_category",
+          }),
+        ];
+        const dictKeys = ["satisfaction_category"]; // 对应的键名
+
+        const results = await Promise.all(requests);
+        results.forEach((result, index) => {
+          if (result.data.code === 0) {
+            this.dicts[dictKeys[index]].push(...result.data.data);
+          } else {
+            console.log(`获取${dictKeys[index]}失败: ${result.data.msg}`);
+          }
+        });
+      } catch (error) {
+        console.log("获取字典失败: ", error);
+      }
+    },
+    // ------------------------------------事件------------------------------------------
+    handelDetail(id) {
+      this.showFollowUpDetail = true;
+      this.inspResultId = id;
+    },
+    handelFollowUpList(id) {
+      this.showFollowUpList = true;
+      this.inspResultId = id;
+    },
+    async handleCreateMonthlySurvey() {
+      try {
+        let url =
+          "/governance/satisfaction/communitySelfInsp/generateQuestionnaire";
+        const { data, code } = await requestPost(url);
+        if (code == 0) {
+          this.showTduckImage = true;
+          this.qrCodeImgUrl = data.qrCodeImgUrl;
+          this.questionnaireUrl = data.questionnaireUrl;
         }
-        await this.getDicts();
-        await this.getTableData();
-        await this.initEcharts();
+      } catch (err) {
+        console.log(err);
+      }
     },
-    created() {
-        let date = new Date()
-        this.formData.period = util.formatDate(date, 'yyyy-MM')
+    initEcharts() {
+      this.myChart = echarts.init(document.getElementById("myCharts"));
+      this.myChart.setOption(this.option);
+      let than = this;
+      this.myChart.on("click", function (params) {
+        than.handelClickChart(params.name, params.seriesName);
+      });
+      this.$nextTick(() => {
+        window.addEventListener("resize", this.handleWindowResize);
+      });
     },
-    activated() {
-        this.handleWindowResize()
+    handleWindowResize() {
+      if (this.myChart) {
+        this.myChart.resize();
+      }
     },
-    methods: {
-        // ------------------------------------字典------------------------------------------
-        async getDicts() {
-            try {
-                const requests = [
-                    this.$http.post("sys/dict/data/dictlist", {
-                        dictType: "satisfaction_category",
-                    }),
-                ];
-                const dictKeys = ["satisfaction_category"]; // 对应的键名
-
-                const results = await Promise.all(requests);
-                results.forEach((result, index) => {
-                    if (result.data.code === 0) {
-                        this.dicts[dictKeys[index]].push(...result.data.data);
-                    } else {
-                        console.log(`获取${dictKeys[index]}失败: ${result.data.msg}`);
-                    }
-                });
-            } catch (error) {
-                console.log("获取字典失败: ", error);
-            }
-        },
-        // ------------------------------------事件------------------------------------------
-        handelDetail(id) {
-            this.showFollowUpDetail = true;
-            this.inspResultId = id
-        },
-        handelFollowUpList(id) {
-            this.showFollowUpList = true;
-            this.inspResultId = id
-        },
-        async handleCreateMonthlySurvey() {
-            try {
-                let url = '/governance/satisfaction/communitySelfInsp/generateQuestionnaire'
-                const { data, code } = await requestPost(url)
-                if (code == 0) {
-                    this.showTduckImage = true
-                    this.qrCodeImgUrl = data.qrCodeImgUrl
-                    this.questionnaireUrl = data.questionnaireUrl
-                }
-            } catch (err) {
-                console.log(err);
-            }
-        },
-        initEcharts() {
-            this.myChart = echarts.init(document.getElementById("myCharts"));
-            this.myChart.setOption(this.option);
-            let than = this;
-            this.myChart.on("click", function (params) {
-                than.handelClickChart(params.name,params.seriesName);
-            });
-            this.$nextTick(()=>{
-                window.addEventListener("resize", this.handleWindowResize);
-            })
-        },
-        handleWindowResize() {
-            if (this.myChart) {
-                this.myChart.resize();
-            }
-        },
-        handelClickChart(name,seriesName) {
-            this.showFormList = true;
-            this.satisfactionCategoryStr = this.dicts.satisfaction_category.filter(
-                (item) => item.label == name
-            )[0].value;
-           this.seriesName = seriesName == '满意'?'veryGood':seriesName == '基本满意'?'good':'bad';
-        },
-        handleClose() {
-            this.showFormList = false;
-            this.showFollowUpDetail = false
-        },
-        // 搜索事件
-        handleSearch(val) {
-            this.getTableData();
-        },
-        async getTableData() {
-        try {
-        // const url = "/governance/satisfaction/communitySelfInsp/stats/synthesis/superior";
-        // const { formData } = this;
-        // let agencyId = this.$store.state.user.agencyId;
-        // const { data, msg } = await requestGet(url, { ...formData,agencyId });
-        const url = "/governance/satisfaction/communitySelfInsp/stats/synthesis";
-        const { formData } = this;
-        const { data, msg } = await requestGet(url, { ...formData });
-
-        // 清空数组和属性值
-        this.total = data.total || 0;
+    handelClickChart(name, seriesName) {
+      this.showFormList = true;
+      this.satisfactionCategoryStr = this.dicts.satisfaction_category.filter(
+        (item) => item.label == name
+      )[0].value;
+      this.seriesName =
+        seriesName == "满意"
+          ? "veryGood"
+          : seriesName == "基本满意"
+          ? "good"
+          : "bad";
+    },
+    handleClose() {
+      this.showFormList = false;
+      this.showFollowUpDetail = false;
+    },
+    // 搜索事件
+    handleSearch(val) {
+      this.initData();
+    },
+    async initData() {
+      if (this.user.level != "street") {
+        this.getCharts();
+      } else {
+        this.getTableData();
+      }
+    },
+    async getCharts() {
+      let url = "/governance/satisfaction/communitySelfInsp/stats/synthesis";
+      const { formData } = this;
+      const { data, code, msg } = await requestGet(url, { ...formData });
+      if (code == 0) {
         this.score = [];
-        this.option.series.forEach(series => series.data = []);
+        this.option.series.forEach((series) => (series.data = []));
         this.option.xAxis.data = [];
-        this.tableData = data.categoryDatas || [];
         this.satisfactionCategory = [];
         this.inspRecordId = data.inspRecordId;
         this.synthesisScore = data.synthesisScore;
         this.synthesisScoreBtLastMonth = data.synthesisScoreBtLastMonth;
         this.synthesisState = this.synthesisScoreBtLastMonth >= 0;
         if (this.synthesisScoreBtLastMonth < 0) {
-            this.synthesisScoreBtLastMonth = Math.abs(this.synthesisScoreBtLastMonth);
+          this.synthesisScoreBtLastMonth = Math.abs(
+            this.synthesisScoreBtLastMonth
+          );
         }
         this.personQty = data.personQty;
 
-        const allowedCategories = this.dicts.satisfaction_category.map(item => item.value);
-        for (const item of this.tableData) {
-            if (allowedCategories.includes(item.satisfactionCategory)) {
-                this.option.series[0].data.push(item.veryGoodQty);
-                this.option.series[1].data.push(item.goodQty);
-                this.option.series[2].data.push(item.badQty);
-                this.option.xAxis.data.push(item.satisfactionCategoryName);
-                this.satisfactionCategory.push(item.satisfactionCategory);
-                this.score.push({
-                    score: item.score,
-                    satisfactionCategoryName: item.satisfactionCategoryName,
-                    imgUrl: require(`@/assets/img/satisfaction/${item.satisfactionCategory}.png`),
-                    scoreDiffBtLastMonth: item.scoreDiffBtLastMonth,
-                    state: item.scoreDiffBtLastMonth >= 0
-                });
-                if (item.scoreDiffBtLastMonth < 0) {
-                    item.scoreDiffBtLastMonth = Math.abs(item.scoreDiffBtLastMonth);
-                }
+        const allowedCategories = this.dicts.satisfaction_category.map(
+          (item) => item.value
+        );
+        for (const item of data.categoryDatas) {
+          if (allowedCategories.includes(item.satisfactionCategory)) {
+            this.option.series[0].data.push(item.veryGoodQty);
+            this.option.series[1].data.push(item.goodQty);
+            this.option.series[2].data.push(item.badQty);
+            this.option.xAxis.data.push(item.satisfactionCategoryName);
+            this.satisfactionCategory.push(item.satisfactionCategory);
+            this.score.push({
+              score: item.score,
+              satisfactionCategoryName: item.satisfactionCategoryName,
+              imgUrl: require(`@/assets/img/satisfaction/${item.satisfactionCategory}.png`),
+              scoreDiffBtLastMonth: item.scoreDiffBtLastMonth,
+              state: item.scoreDiffBtLastMonth >= 0,
+            });
+            if (item.scoreDiffBtLastMonth < 0) {
+              item.scoreDiffBtLastMonth = Math.abs(item.scoreDiffBtLastMonth);
             }
+          }
         }
+        this.myChart.setOption(this.option);
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getTableData() {
+      let url =
+        "/governance/satisfaction/communitySelfInsp/stats/synthesis/superior";
+      const { formData, agencyId } = this;
+      const { data, msg, code } = await requestGet(url, {
+        ...formData,
+        agencyId,
+      });
+      if (code == 0) {
+        this.score = [];
+        this.satisfactionCategory = [];
+        this.inspRecordId = data.inspRecordId;
+        this.synthesisScore = data.synthesisScore;
+        this.synthesisScoreBtLastMonth = data.synthesisScoreBtLastMonth;
+        this.synthesisState = this.synthesisScoreBtLastMonth >= 0;
+        if (this.synthesisScoreBtLastMonth < 0) {
+          this.synthesisScoreBtLastMonth = Math.abs(
+            this.synthesisScoreBtLastMonth
+          );
+        }
+        this.personQty = data.personQty;
 
-            this.myChart.setOption(this.option);
-        } catch (error) {
-            console.log(error);
+        const allowedCategories = this.dicts.satisfaction_category.map(
+          (item) => item.value
+        );
+        for (const item of data.categoryDatas) {
+          if (allowedCategories.includes(item.satisfactionCategory)) {
+            this.satisfactionCategory.push(item.satisfactionCategory);
+            this.score.push({
+              score: item.score,
+              satisfactionCategoryName: item.satisfactionCategoryName,
+              imgUrl: require(`@/assets/img/satisfaction/${item.satisfactionCategory}.png`),
+              scoreDiffBtLastMonth: item.scoreDiffBtLastMonth,
+              state: item.scoreDiffBtLastMonth >= 0,
+            });
+            if (item.scoreDiffBtLastMonth < 0) {
+              item.scoreDiffBtLastMonth = Math.abs(item.scoreDiffBtLastMonth);
+            }
+          }
         }
+        this.tableList = data.childrenAgencyDatas;
+        this.total = this.tableList.length
+      }
     },
-
-
-        //   重置
-        resetSearch() {
-            this.formData = {};
-            this.getTableData();
-        },
+    handleCurrentChange() {
+      this.pageNo = val;
+      this.getTableData();
+    },
+    handleSizeChange() {
+      this.pageSize = val;
+      window.localStorage.setItem("pageSize", val);
+      this.getTableData();
     },
+    //   重置
+    resetSearch() {
+      this.formData = {};
+      this.initData();
+    },
+  },
 
-    props: {},
+  props: {},
 };
 </script>
 <style lang="scss" scoped>
@@ -407,100 +985,104 @@ export default {
 @import "@/assets/scss/modules/management/list-main.scss";
 @import "@/assets/scss/modules/shequzhili/event-info.scss";
 
-.div_btn_left>* {
-    margin-right: 10px;
+.div_btn_left > * {
+  margin-right: 10px;
 }
 
 .m-table-item {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .content_box {
-    display: flex;
-    height: 160px;
-    margin-top: 24px;
-
-    .left {
-        background: #f7faff;
-        margin-right: 10px;
-        min-width: 300px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 5px;
-        padding: 10px;
-        box-sizing: border-box;
-        img {
-            margin-right: 8px;
-        }
-    }
+  display: flex;
+  height: 160px;
+  margin-top: 24px;
 
+  .left {
+    background: #f7faff;
+    margin-right: 10px;
+    min-width: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    padding: 10px;
+    box-sizing: border-box;
     img {
-        width: 50px;
-        height: 50px;
-        margin-right: 15px;
+      margin-right: 8px;
     }
+  }
 
-    .left_right,
-    .right_right {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        :nth-child(1) {
-            font-size: 18px;
-            font-family: PingFang SC;
-            font-weight: bold;
-            color: #333333;
-        }
+  img {
+    width: 50px;
+    height: 50px;
+    margin-right: 15px;
+  }
 
-        :nth-child(2) {
-            font-size: 14px;
-            font-family: PingFang SC;
-            color: #666666;
-        }
+  .left_right,
+  .right_right {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    :nth-child(1) {
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #333333;
     }
-    .right_box{
-        img{
-            margin: 0;
-            width:10px;
-             height:14px;
 
-        }
-        .down{
-            color:#FF7135  ;
-        }
-        .up{
-            color:#00BB72   ;
-
-        }
+    :nth-child(2) {
+      font-size: 14px;
+      font-family: PingFang SC;
+      color: #666666;
     }
-    .right {
-        flex: 1;
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-
-        .box {
-            height: 75px;
-            margin: 0 10px 10px 0;
-
-            .card {
-                background: #f7faff;
-                width: 100%;
-                height: 100%;
-                display: flex;
-                align-items: center;
-                border-radius: 5px;
-                padding: 20px;
-                box-sizing: border-box;
-            }
-        }
+  }
+  .right_box {
+    img {
+      margin: 0;
+      width: 10px;
+      height: 14px;
     }
+  }
+  .right {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+
+    .box {
+      height: 75px;
+      margin: 0 10px 10px 0;
+
+      .card {
+        background: #f7faff;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        border-radius: 5px;
+        padding: 20px;
+        box-sizing: border-box;
+      }
+    }
+  }
 }
 
 #myCharts {
-    width: 100%;
-    flex: 1;
+  width: 100%;
+  height: 100%;
+}
+.bto-box {
+  flex: 1;
+}
+.down {
+  color: #ff7135;
+}
+.up {
+  color: #00bb72;
+}
+.gray {
+  color: #999999;
 }
 </style>