【图斑调整】外层UI修改

src/views/demo/tiankongdi/changearea/AuditProgress/index.vue

@@ -41,12 +41,49 @@
         @click="emits('showInfo', true, item)"
         v-if="dataList.length > 0"
       >
-        <div class="name-div">
+      <div class="name-div">
           <div class="item-mark"></div>
           <div class="item-label">{{ item.areaname }}</div>
+          <div class="progress-div">
+            <div class="progress-label progress-color">进度</div>
+            <div class="progress-data" style="width:97px">
+              <span style="color: #086DEC;">{{item.verificatedtask}}</span>/{{item.totaltask}}
+            </div>
+          </div>
+          <div class="progress-div">
+            <div class="progress-label extended-color">超期</div>
+            <div class="progress-data" style="width:50px">
+              <span style="color: #D03542">{{item.overduetask}}</span>
+            </div>
+          </div>
+          <div class="progress-div">
+            <div class="progress-label reviewed-color" style="width:70px;">待审核</div>
+            <div class="progress-data" style="width:50px">
+              <span style="color: #EC7908;">{{item.verifytask}}</span>
+            </div>
+          </div>
         </div>
-        <div class="data-div">
+        <div class="info-data-div">
-          <span>{{ item.count }}</span>
+          <div class="info-data-item">
+            <div class="info-data-label">合法</div>
+            <div class="info-data-data">{{item.legalcase}}</div>
+          </div>
+          <div class="info-data-item">
+            <div class="info-data-label">其他</div>
+            <div class="info-data-data">{{item.ilegalcase}}</div>
+          </div>
+          <div class="info-data-item">
+            <div class="info-data-label">非粮化</div>
+            <div class="info-data-data">{{item.nonfoodcase}}</div>
+          </div>
+          <div class="info-data-item">
+            <div class="info-data-label">复耕</div>
+            <div class="info-data-data">{{item.rehabilitationcase}}</div>
+          </div>
+          <div class="info-data-item">
+            <div class="info-data-label">补手续</div>
+            <div class="info-data-data">{{item.makeupcase}}</div>
+          </div>
         </div>
       </div>
       <div v-else class="no-data">
@@ -58,10 +95,10 @@
 
 <script setup lang="ts">
   import { ref, defineProps, defineEmits, toRefs } from 'vue';
-  import { batchOptions, yearOptions } from '@/views/demo/tiankongdi/curbspotcity/util.ts';
+  import { batchOptions, yearOptions,patchSourceOptions } from '@/views/demo/tiankongdi/curbspotcity/util.ts';
   import { Empty } from 'ant-design-vue';
 
-  const props = defineProps(['year', 'batch', 'dataList']);
+  const props = defineProps(['year', 'batch', 'dataList','patchSource']);
   const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
   const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
 </script>
@@ -73,23 +110,27 @@
     .screen-row {
       display: flex;
       .screen-item {
-        flex: 1;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 17px;
+        color: #000000;
+        width: 50%;
         display: flex;
         .screen-item-label {
-          width: 55px;
+          width: 56px;
           padding-left: 10px;
           display: flex;
           align-items: center;
-          font-size: 15px;
         }
       }
     }
   }
   .data-list {
-    height: calc(100% - 52px);
+    height: calc(100% - 62px);
-    background: @component-background;
-    margin-top: 10px;
     // background: darkgoldenrod;
+    // background: @component-background;
+    margin-top: 10px;
+    padding: 0px 10px;
     .data-title {
       height: 40px;
       background: #bab9b7;
@@ -102,17 +143,58 @@
     }
     .show-data-list-content {
       .data-item {
+        cursor: pointer;
         width: 100%;
+        background: #fff;
+        border-radius: 11px;
+        padding: 10px;
+        margin-bottom: 10px;
+        .name-div {
+        display: flex;
         display: flex;
         height: 50px;
-        align-items: center;
+          display: flex;
-        padding: 10px;
+        height: 50px;
-        justify-content: space-between;
+          align-items: center;
-        border-bottom: 1px solid #ececec;
+          padding: 10px 0px;
-        cursor: pointer;
+          border-bottom: 1px solid #E5E5E5;
-        .name-div {
+        }
+        .info-data-div{
           display: flex;
           align-items: center;
+          justify-content: space-between;
+          margin-top: 10px;
+          .info-data-item{
+            display: flex;
+            align-items: center;
+            flex: 1;
+            justify-content: center;
+            border-right: 1px solid #EDEDED;
+            .info-data-label{
+              font-family: Alibaba PuHuiTi;
+              font-weight: 400;
+              font-size: 16px;
+              color: #959494;
+              display: flex;
+              justify-content: end;
+              flex: 1;
+              padding-right: 5px;
+            }
+            .info-data-data{
+              font-family: HarmonyOS Sans;
+              font-weight: 500;
+              font-size: 16px;
+              color: #000000;
+              line-height: 30px;
+              flex: 1;
+              display: flex;
+              justify-content: start;
+              padding-left: 5px;
+            }
+          }
+          .info-data-item:nth-last-child(1){
+            border-right: 0px;
+          }
         }
         .data-div {
           font-weight: 500;
@@ -126,17 +208,52 @@
           margin-right: 7px;
         }
         .item-label {
+          width: 100px;
           font-size: 16px;
           font-weight: 600;
           margin-left: 5px;
         }
+        .progress-div{
+          display:flex;
+          font-weight: 500;
+          font-size: 16px;
+          line-height: 30px;
+          margin-right: 17px;
+          .progress-label{
+            font-family: Alibaba PuHuiTi;
+            color: #FFFFFF;
+            width: 50px;
+            height: 27px;
+            border-radius: 13px 0px 0px 13px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .progress-data{
+            background: #EFEFEF;
+            height: 27px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0px 0px 11px 0px;
+          }
+          .progress-color{
+            background: #086DEC;
+          }
+          .extended-color{
+            background: #D03542
+          }
+          .reviewed-color{
+            background: #EC7908
+          }
+        }
       }
       .data-item:hover {
         background-color: rgba(8, 109, 236, 0.08);
       }
-      .data-item:nth-child(2n) {
+      // .data-item:nth-child(2n) {
-        background: #ececec;
+      //   background: #ececec;
-      }
+      // }
     }
   }
   .no-data {