待办事项

src/pages/business/mhxf/needMatter/index.vue

@@ -4,18 +4,72 @@
   </u-sticky>
 
   <view class="needMatter" @touchstart="fingerstart" @touchend="fingerend" style="background-color: #f7f7f7">
-    <view class="content">
-      <!-- <view style="text-align: center; color: rgb(189, 189, 189); font-size: 14px" v-if="!dataRes">暂无数据</view>
-      <view v-else>
-        <u-row v-for="po in classifyData" :key="po">
-          <u-col span="4">
-            <view style="text-align: right; padding: 0px 5px 0px 5px">{{ po.title }}</view>
-          </u-col>
-          <u-col span="8">
-            <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.value }}</view>
-          </u-col>
-        </u-row>
-      </view> -->
+    <u-empty v-if="classifyData.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
+
+    <view class="content" v-else>
+      <u-collapse>
+        <u-collapse-item>
+          <template #title>
+            <view style="display: flex; line-height: 25px">
+              <view style="padding-top: 4px">
+                <u--image src="/static/images/needMatter/icon1.png" width="14px" height="15px"></u--image>
+              </view>
+              <view style="padding: 0 10px; white-space: nowrap; font-size: 16px">
+                <view>整改通知</view>
+                <view>整改期限：</view>
+                <view style="font-size: 14px; color: #666666">234234569</view>
+              </view>
+              <view style="width: 100%; text-align: center; font-size: 16px">
+                <view :style="{ color: '#0887f8' }">已接收</view>
+                <view style="text-align: left">2023-07-15</view>
+                <view style="font-size: 14px; color: #666666">2023-02-23 15:15:12</view>
+              </view>
+            </view>
+          </template>
+          <text class="u-collapse-content">
+            <view>
+              <view class="tableType1" style="margin-bottom: 10px">
+                <u-row>
+                  <u-col span="2">
+                    <view>序号</view>
+                  </u-col>
+                  <u-col span="5.5">
+                    <view>整改项</view>
+                  </u-col>
+                  <u-col span="4.5">
+                    <view>原因</view>
+                  </u-col>
+                </u-row>
+                <u-row v-for="(co, index) in content4" :key="index">
+                  <u-col span="2">
+                    <view>{{ co.name1 }}</view>
+                  </u-col>
+                  <u-col span="5.5">
+                    <view>{{ co.name2 }}</view>
+                  </u-col>
+                  <u-col span="4.5">
+                    <view>{{ co.name3 }}</view>
+                  </u-col>
+                </u-row>
+              </view>
+              <view style="margin-bottom: 10px">
+                <u-steps current="2" dot>
+                  <u-steps-item style="text-align: center" title="已接收" :desc="`2023-07-15 \n 14:00:00`"> </u-steps-item>
+                  <u-steps-item style="text-align: center" title="整改中" :desc="`2023-07-15 \n 14:00:00`"></u-steps-item>
+                  <u-steps-item style="text-align: center" title="审核通过" :desc="`2023-07-15 \n 14:00:00`"></u-steps-item>
+                </u-steps>
+              </view>
+              <view style="margin-bottom: 10px">
+                <u-steps current="2" dot>
+                  <u-steps-item style="text-align: center" title="已接收" :desc="`2023-07-15 \n 14:00:00`"> </u-steps-item>
+                  <u-steps-item style="text-align: center" title="整改中" :desc="`2023-07-15 \n 14:00:00`"></u-steps-item>
+                  <u-steps-item style="text-align: center" title="审核不通过" :desc="`2023-07-15 \n 14:00:00`" error></u-steps-item>
+                </u-steps>
+              </view>
+            </view>
+          </text>
+        </u-collapse-item>
+      </u-collapse>
     </view>
   </view>
 </template>
@@ -34,6 +88,24 @@ const publicStores = publicStore(); //全局公共Store
 const current = ref(0);
 const classifyUrl = ref("");
 const dataRes = ref(1);
+const classifyData = ref([]); //警情查询数据存储
+const content4 = ref([
+  {
+    name1: "1",
+    name2: "火灾报警系统",
+    name3: "存在报警未处置",
+  },
+  {
+    name1: "2",
+    name2: "消防水系统",
+    name3: "存在报警未处置",
+  },
+  {
+    name1: "3",
+    name2: "燃气、电气系统监测",
+    name3: "存在报警未处置",
+  },
+]);
 
 const list = ref([
   {
@@ -78,7 +150,6 @@ const topMed = ref("");
 const bottomMed = ref("");
 const leftMed = ref("");
 const rightMed = ref("");
-const classifyData = ref([]); //警情查询数据存储
 
 /**
  * @当按下去的时候
@@ -470,35 +541,11 @@ onMounted(() => {});
   height: calc(100vh - 88px);
   background-color: #ffffff;
   .content {
-    padding: 10px;
-    .u-row {
-      height: 36px;
-      line-height: 36px;
-      .u-col {
-        border: 1px #e4e3e3 solid;
-        border-right: 0px;
-        border-bottom: 0px;
-        text-align: center;
-
-        view {
-          padding: 0 10px;
-          min-height: 36px;
-          overflow: hidden; //超出的文本隐藏
-          // text-overflow: ellipsis; //溢出用省略号显示
-          overflow: auto;
-          white-space: nowrap; // 默认不换行；
-          font-size: 14px;
-        }
-      }
-
-      .u-col:last-child {
-        border-right: 1px #e4e3e3 solid;
-      }
-    }
-
-    .u-row:last-child {
-      .u-col {
-        border-bottom: 1px #e4e3e3 solid;
+    // padding: 10px;
+    .u-collapse {
+      .u-collapse-item {
+        background: #ffffff;
+        margin-bottom: 10px;
       }
     }
   }

src/static/scss/public.scss

@@ -203,6 +203,16 @@ uni-input {
 }
 //折叠面板样式 结束
 
+//步骤条样式 开始
+.u-steps {
+  .u-steps-item {
+    .u-text {
+      justify-content: center !important;
+    }
+  }
+}
+//步骤条样式 结束
+
 /*
  * 页面样式 开始
  * @/pages/xunJian/plan/components/siteDetails.vue