工单

src/project/weiyang/AppPatrolReport/StatisticsList.vue

@@ -25,7 +25,7 @@
             <span class="icon"></span>
             <span>{{ $dict.getLabel('clapEventStatus', item.eventStatus) }}</span>
           </div>
-          <div class="level-type">中风险纠纷</div>
+          <div class="level-type">{{item.createTime}}</div>
         </div>
       </div>
       <AiEmpty v-if="!datas.length"/>
@@ -240,7 +240,9 @@ uni-page-body {
         background: #ff4466;
       }
     }
-
+    .level-type {
+      color: #999;
+    }
     .level-type0 {
       color: #52C75B;
     }

src/project/weiyang/AppWorkOrder/AppWorkOrder.vue

@@ -19,7 +19,7 @@
       </div>
     </div>
     <div v-if="!isGridMember" class="empty">
-      <img src="./components/img/no-admin.png" alt="">
+      <img src="https://cdn.sinoecare.com/i/2024/07/18/66987e8c5b56b.png" alt="">
       <p>没有网格员权限<br/>无法查看工单管理信息哦~</p>
     </div>
     <u-select v-model="showType" :list="tabList" value-name="value" label-name="name" @confirm="confirm"></u-select>

src/project/weiyang/AppWorkOrder/Statistics.vue

@@ -1,14 +1,6 @@
 <template>
   <div class="statistics">
-    <!-- <div class="top-tabs" :style="{'top': `${statusBarHeight+44}px`}">
-      <div class="select-gird">
-        <AiPagePicker type="gird" valueObj nodeKey="id" formType="2" @select="handleSelectGird" class="right-span"
-                      action="/app/apppatrolreportinfo/listByInfo">
-          <AiMore v-model="selectGird.girdName" icon="arrow-right" placeholder="选择网格"/>
-        </AiPagePicker>
-      </div>
-    </div> -->
-    <div class="select-gird" :style="{'top': `${statusBarHeight+44}px`}">
+    <div class="select-gird">
       <AiPagePicker type="gird" valueObj nodeKey="id" @select="handleSelectGird" class="right-span"
         :params="{formType:2, axiosUrl:'/app/apppatrolreportinfo/listByInfo'}">
         <!-- <AiMore v-model="selectGird.girdName" icon="arrow-right" placeholder="选择网格"/> -->
@@ -22,36 +14,31 @@
       </AiPagePicker>
     </div>
     <div class="statstics-content">
-      <div class="info-content">
-        <div class="title">概况总览</div>
-        <div class="el-row">
-          <div class="item" v-for="(item, index) in todayList" :key="index" @click="toList(item)">
-            <h2>{{ item.value }}</h2>
-            <p>{{ item.label }}</p>
-          </div>
+      <div class="el-row">
+        <div class="item" v-for="(item, index) in todayList" :key="index" @click="toList(item)">
+          <div class="label"><span></span>{{ item.label }}</div>
+          <h2>{{ item.value }}</h2>
         </div>
       </div>
+      <div class="title">工单办结率</div>
       <div class="info-content">
-        <div class="title">事件办结率</div>
-        <div class="echart-content" id="finish" v-if="showFinish"></div>
-        <div class="num" v-if="showFinish">{{ finshNum || 0 }}%</div>
+        <canvas canvas-id="finish" id="finish" class="echart-content e-canvas" v-if="showFinish"/>
         <AiEmpty v-else></AiEmpty>
       </div>
-
+      <div class="title">工单管理趋势图</div>
       <div class="info-content">
-        <div class="title">工单管理趋势图</div>
+        
         <AiEmpty v-if="!trendData.length"></AiEmpty>
-        <div class="echart-content" id="trend" v-else></div>
+        <canvas canvas-id="trend" id="trend" class="echart-content" v-else/>
       </div>
-
-      <div class="info-content">
-        <div class="title">巡查事件分类
+      <div class="title">工单分类
           <!-- <div class="type-select" :style="statusInfo.name ? '' : 'color:#999;'" @click="show=true">{{statusInfo.name || '请选择'}}<u-icon name="arrow-right"></u-icon></div> -->
-          <u-select v-model="show" :list="$dict.getDict('clapEventStatusHistory')" value-name="dictValue"
-                    label-name="dictName" @confirm="selectStatus"></u-select>
-        </div>
+        <u-select v-model="show" :list="$dict.getDict('clapEventStatusHistory')" value-name="dictValue"
+          label-name="dictName" @confirm="selectStatus"></u-select>
+      </div>
+      <div class="info-content">
         <AiEmpty v-if="!typeData.length"></AiEmpty>
-        <div class="echart-content" id="type" v-else></div>
+        <canvas canvas-id="type" id="type" class="echart-content" v-else/>
       </div>
       <div class="pad-b120"></div>
     </div>
@@ -61,9 +48,9 @@
 <script>
 import {mapState} from 'vuex'
 // import echarts from 'echarts'
-
+import uCharts from "../AppPatrolReport/components/echarts/u-charts.min.js";
+var uChartsInstance = {};
 export default {
-  props: {},
   data() {
     return {
       todayList: [],
@@ -79,15 +66,14 @@ export default {
       trendDataX: [],
       typeData: [],
       statusInfo: {name: '', eventStatus: ''},
-      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
     }
   },
   computed: {
     ...mapState(['user']),
   },
 
-  created() {
-    // this.getGirdInfo()
+  mounted() {
+    this.getGirdInfo()
   },
   methods: {
     getStatistics() {
@@ -105,45 +91,51 @@ export default {
 
           Object.keys(res.data.finishCountMap).forEach((key) => {
             var info = {
-              name: key,
-              value: res.data.finishCountMap[key]
+              'name': key,
+              'value': Number(res.data.finishCountMap[key])
             }
+            this.finishData.push(info)
+
             if (res.data.finishCountMap[key] > 0) {
               this.showFinish = true
             }
-            this.finishData.push(info)
           })
 
+          console.log(this.finishData)
+
           if (this.showFinish) {
             var num = res.data.finishCountMap['累计事件办结'] / res.data.finishCountMap['累计事件上报']
             this.finshNum = Number(num * 100).toFixed(2)
           }
-
-
           res.data.dateCountList.map((item) => {
             this.trendData.push(item.ecount)
             this.trendDataX.push(item.ymd)
           })
-
           res.data.groupList.map((item) => {
             var info = {
-              name: item.groupName,
-              value: item.totalNum
+              'name': item.groupName,
+              'value': item.totalNum
             }
             this.typeData.push(info)
           })
 
-          this.$nextTick(() => {
-            if (this.showFinish) {
-              this.finishChartInit()
-            }
-            if (this.trendData.length) {
-              this.trendChartInit()
-            }
-            if (this.typeData.length) {
-              this.typeChartInit()
-            }
-          })
+          console.log(this.finishData)
+          if (this.showFinish) {
+            this.$nextTick(() => {
+              this.finishChartInit('finish')
+            })
+          }
+          if (this.trendData.length) {
+            this.$nextTick(() => {
+              this.trendChartInit('trend')
+            })
+          }
+          if (this.typeData.length) {
+            this.$nextTick(() => {
+              this.typeChartInit('type')
+            })
+          }
+
         }
       })
     },
@@ -159,153 +151,196 @@ export default {
         }
       })
     },
-
-    finishChartInit() {
-      this.finishChart = echarts.init(document.getElementById('finish'))
-      var option = {
-        tooltip: {
-          trigger: 'item'
-        },
+    finishChartInit(id) {
+      // console.log(this.finishData)
+      var ctx = uni.createCanvasContext(id, this);
+      uChartsInstance[id] = new uCharts({
+        type: "ring",
+        width: 350,
+        height: 250,
+        context: ctx,
         series: [
           {
-            name: '事件办结率',
-            type: 'pie',
-            radius: ['30%', '60%'],
-            itemStyle: {
-              normal: {
-                color: function (colors) {
-                  var colorList = ['#7E94F6', '#85E3D5', '#2891FF'];
-                  return colorList[colors.dataIndex];
-                }
-              },
-            },
-            data: this.finishData,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)',
-              }
-            }
+            data: this.finishData
           }
-        ]
-      };
-      this.finishChart.setOption(option)
-    },
+        ],
+        animation: true,
+        rotate: false,
+        rotateLock: false,
+        background: "#FFFFFF",
+        color: ['#7E94F6', '#85E3D5', '#2891FF'],
+        padding: [5,5,5,5],
+        dataLabel: true,
+        enableScroll: false,
+        legend: {
+          show: true,
+          position: "bottom",
+          lineHeight: 25
+        },
+        title: {
+          name: "办结率",
+          fontSize: 12,
+          color: "#222"
+        },
+        subtitle: {
+          name: this.finshNum+'%',
+          fontSize: 20,
+          color: "#5C8FFA"
+        },
+        extra: {
+          ring: {
+            ringWidth: 40,
+            activeOpacity: 0.5,
+            activeRadius: 10,
+            offsetAngle: 0,
+            labelWidth: 5,
+            border: false,
+            borderWidth: 2,
+            borderColor: "#FFFFFF"
+          }
+        }
+      })
 
-    trendChartInit() {
-      this.trendChart = echarts.init(document.getElementById('trend'))
-      var option2 = {
-        grid: {
-          left: '5%',
-          right: '5%',
-          bottom: '3%',
-          containLabel: true
+      // const query = uni.createSelectorQuery().in(this);
+      // query.select('#' + id).fields({ node: true, size: true }).exec(res => {
+      //   console.log(res)
+      //   if (res[0]) {
+      //     const canvas = res[0].node;
+      //     const ctx = canvas.getContext('2d');
+      //     canvas.width = 350
+      //     canvas.height = 250
+      //     uChartsInstance[id] = new uCharts({
+      //       type: "ring",
+      //       width: 350,
+      //       height: 250,
+      //       context: ctx,
+      //       series: [
+      //         {
+      //           data: this.finishData
+      //         }
+      //       ],
+      //       animation: true,
+      //       rotate: false,
+      //       rotateLock: false,
+      //       background: "#FFFFFF",
+      //       color: ['#7E94F6', '#85E3D5', '#2891FF'],
+      //       padding: [5,5,5,5],
+      //       dataLabel: true,
+      //       enableScroll: false,
+      //       legend: {
+      //         show: true,
+      //         position: "bottom",
+      //         lineHeight: 25
+      //       },
+      //       title: {
+      //         name: "办结率",
+      //         fontSize: 12,
+      //         color: "#222"
+      //       },
+      //       subtitle: {
+      //         name: this.finshNum+'%',
+      //         fontSize: 20,
+      //         color: "#5C8FFA"
+      //       },
+      //       extra: {
+      //         ring: {
+      //           ringWidth: 40,
+      //           activeOpacity: 0.5,
+      //           activeRadius: 10,
+      //           offsetAngle: 0,
+      //           labelWidth: 5,
+      //           border: false,
+      //           borderWidth: 2,
+      //           borderColor: "#FFFFFF"
+      //         }
+      //       }
+      //     });
+      //   }else{
+      //     console.error("[uCharts]: 未获取到 context");
+      //   }
+      // });
+    },
+    trendChartInit(id) {
+      const ctx = uni.createCanvasContext(id, this);
+      uChartsInstance[id] = new uCharts({
+        type: "line",
+        context: ctx,
+        width: 346,
+        height: 232,
+        categories: this.trendDataX,
+        series: [
+          {
+            name: '',
+            data: this.trendData
+          }
+        ],
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#2891FF"],
+        padding: [15, 10, 0, 15],
+        enableScroll: false,
+        legend: {
+          show: false
         },
         xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          axisLine: {
-            lineStyle: {
-              color: '#E1E5EF', //x轴的颜色
-              width: 1, //轴线的宽度
-            },
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#666',
-            },
-          },
-          data: this.trendDataX
+          disableGrid: true,
         },
         yAxis: {
-          axisLine: {       //y轴
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#666',
-            },
-          },
-          type: 'value',
+          gridType: "dash",
+          dashLength: 2,
         },
-        tooltip: {
-          trigger: 'axis'
+        linearType: 'custom',
+        serie: {
+          linearColor: '#5B8FF9'
         },
+        extra: {
+          line: {
+            type: "straight",
+            width: 2,
+            activeType: "hollow",
+          },
+        }
+      })
+    },
+    typeChartInit(id) {
+      var ctx = uni.createCanvasContext(id, this);
+      uChartsInstance[id] = new uCharts({
+        type: "ring",
+        width: 350,
+        height: 250,
+        context: ctx,
         series: [
           {
-            data: this.trendData,
-            type: 'line',
-            areaStyle: {//覆盖区域的渐变色
-              normal: {
-                color: {
-                  type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
-                    },
-                    {
-                      offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
-                    }
-                  ],
-                  global: false // 缺省为 false
-                },
-              }
-            },
-            lineStyle: {
-              normal: {
-                color: '#2891FF'
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: '#2891FF',
-              }
-            }
+            data: this.typeData
           }
-        ]
-      };
-      this.trendChart.setOption(option2)
-    },
-
-    typeChartInit() {
-      this.typeChart = echarts.init(document.getElementById('type'))
-      var option3 = {
-        tooltip: {
-          trigger: 'item'
+        ],
+        animation: true,
+        rotate: false,
+        rotateLock: false,
+        background: "#FFFFFF",
+        color: ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'],
+        padding: [5,5,5,5],
+        dataLabel: true,
+        enableScroll: false,
+        legend: {
+          show: true,
+          position: "bottom",
+          lineHeight: 25
         },
-        series: [
-          {
-            name: '巡查事件分类',
-            type: 'pie',
-            radius: ['0%', '70%'],
-            itemStyle: {
-              normal: {
-                color: function (colors) {
-                  var colorList = ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
-                  return colorList[colors.dataIndex];
-                }
-              },
-            },
-            data: this.typeData,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)',
-              }
-            }
+        extra: {
+          ring: {
+            ringWidth: 40,
+            activeOpacity: 0.5,
+            activeRadius: 10,
+            offsetAngle: 0,
+            labelWidth: 5,
+            border: false,
+            borderWidth: 2,
+            borderColor: "#FFFFFF"
           }
-        ]
-      };
-      this.typeChart.setOption(option3)
+        }
+      })
     },
-
     selectStatus(e) {
       this.statusInfo.name = e[0].label
       this.statusInfo.eventStatus = e[0].value
@@ -322,7 +357,7 @@ export default {
           return searchType = index
         }
       })
-      uni.navigateTo({url: `./StatisticsList?title=${row.label}&searchType=${searchType}&girdId=${this.selectGird.id}`})
+      uni.navigateTo({url: `./StatisticsList?searchType=${searchType}&girdId=${this.selectGird.id}`})
     }
   },
 }
@@ -330,12 +365,6 @@ export default {
 
 <style scoped lang="scss">
 .statistics {
-  background-color: #F3F7F8;
-
-  .statstics-content {
-    padding: 128px 30px 200px;
-  }
-
   .select-gird {
     width: calc(100% - 64px);
     box-sizing: border-box;
@@ -363,69 +392,106 @@ export default {
       }
     } 
   }
-
+  .statstics-content {
+    padding: 128px 30px 200px;
+    .el-row {
+      .item {
+        display: inline-block;
+        width: calc(50% - 9px);
+        padding: 24px;
+        box-sizing: border-box;
+        background-color: #fff;
+        border-radius: 16px;
+        margin: 0 16px 16px 0;
+        .label {
+          line-height: 40px;
+          font-family: PingFangSC-Regular;
+          font-size: 28px;
+          color: #666;
+          margin-bottom: 8px;
+          span {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+            border-radius: 50%;
+          }
+        }
+        h2 {
+          line-height: 64px;
+          font-family: PingFangSC-SNaNpxibold;
+          font-weight: 600;
+          font-size: 48px;
+          color: #333;
+          padding-left: 24px;
+        }
+      }
+      .item:nth-of-type(1) {
+        .label {
+          span {
+            border: 4px solid #7A8EC5;
+          }
+        }
+      }
+      .item:nth-of-type(2) {
+        margin-right: 0;
+        .label {
+          span {
+            border: 4px solid #F6BD15;
+          }
+        }
+      }
+      .item:nth-of-type(3) {
+        .label {
+          span {
+            border: 4px solid #5C8FFA;
+          }
+        }
+      }
+      .item:nth-of-type(4) {
+        margin-right: 0;
+        .label {
+          span {
+            border: 4px solid #60DCAA;
+          }
+        }
+      }
+    }
+  }
+  .title {
+    font-size: 32px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #333;
+    line-height: 48px;
+    padding: 24px;
+    .type-select {
+      font-size: 26px;
+      position: absolute;
+      top: 20px;
+      right: 32px;
+      width: calc(100% - 250px);
+      text-align: right;
+      line-height: 48px;
+    }
+  }
   .info-content {
     width: 100%;
     background: #FFF;
     border-radius: 16px;
-    margin-bottom: 24px;
+    margin-bottom: 32px;
     position: relative;
     padding-bottom: 32px;
-
-    .title {
-      font-size: 32px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #333;
-      line-height: 48px;
-      padding: 24px 16px 24px 24px;
-
-      img {
-        float: right;
-        width: 40px;
-        height: 40px;
-      }
-
-      .type-select {
-        font-size: 26px;
-        position: absolute;
-        top: 20px;
-        right: 32px;
-        width: calc(100% - 250px);
-        text-align: right;
-        line-height: 48px;
-      }
-    }
-
-    .el-row {
-      display: flex;
-      padding: 32px 0 60px 0;
-
-      .item {
-        flex: 1;
-        text-align: center;
-
-        h2 {
-          font-size: 64px;
-          font-family: DINAlternate-Bold, DINAlternate;
-          font-weight: bold;
-          color: #3B424A;
-          line-height: 64px;
-          margin-bottom: 8px;
-        }
-
-        p {
-          font-size: 28px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          color: #999;
-          line-height: 40px;
-        }
-      }
+    img {
+      float: right;
+      width: 40px;
+      height: 40px;
     }
 
     .echart-content {
       width: 100%;
       height: 500px;
+      padding: 0 32px;
+      box-sizing: border-box;
     }
 
     .num {
@@ -439,7 +505,6 @@ export default {
       text-align: center;
     }
   }
-
   .pad-b120 {
     background-color: #F3F7F8;
     padding-bottom: 120px;

src/project/weiyang/AppWorkOrder/StatisticsList.vue

@@ -1,42 +1,35 @@
 <template>
-  <div class="list-content">
-    <u-navbar back-icon-color="#000" title="工单管理" title-color="#000" title-width="300" title-size="32" 
+  <div class="list">
+    <u-navbar back-icon-color="#000" :title="title" title-color="#000" title-width="300" title-size="32" 
       :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
     <div class="header-content-bg">
       <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
     </div>
-    <template>
-      <AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
-        <template #custom>
-          <div class="card-top">
-            <div class="titles">{{ item.content }}</div>
-
-            <div class="types">
-              <span>事件类型</span>
-              <span class="types-right">{{ item.groupName }}</span>
-            </div>
-            <div class="types">
-              <span>事件来源</span>
-              <span class="types-right">{{ $dict.getLabel('residentEventSource', item.eventSource) }}</span>
-            </div>
-
-            <div class="gards">
-              <span>所属网格</span>
-              <span class="gards-right">{{ item.girdName }}</span>
-            </div>
+    <div class="list-content">
+      <div class="item" v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
+        <div class="card-top">
+          <div class="titles">{{ item.content }}</div>
+          <div class="source-type">{{ $dict.getLabel('residentEventSource', item.eventSource) }}</div>
+          <div class="info">
+            <span>事件类型</span>
+            <span class="value">{{ item.groupName }}</span>
           </div>
-
-          <div class="status" :class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'"
-            v-if="item.eventStatus">
+          <div class="info">
+            <span>所属网格</span>
+            <span class="value">{{ item.girdName }}</span>
+          </div>
+        </div>
+        <div class="card-bottom">
+          <div class="status" v-if="item.eventStatus"
+            :class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'">
             <span class="icon"></span>
-            <span>
-              {{ $dict.getLabel('clapEventStatus', item.eventStatus) }}
-            </span>
+            <span>{{ $dict.getLabel('clapEventStatus', item.eventStatus) }}</span>
           </div>
-        </template>
-      </AiCard>
-      <AiEmpty v-if="!datas.length"></AiEmpty>
-    </template>
+          <div class="level-type">{{item.createTime}}</div>
+        </div>
+      </div>
+      <AiEmpty v-if="!datas.length"/>
+    </div>
     <div class="pad-b120" v-if="datas.length"></div>
   </div>
 </template>
@@ -45,7 +38,6 @@
 import {mapState} from 'vuex'
 
 export default {
-  props: {},
   customNavigation: true,
   data() {
     return {
@@ -54,7 +46,11 @@ export default {
       pages: 0,
       searchType: '',
       title: '',
-      girdId: ''
+      girdId: '',
+      backgroundNavbar: {
+        background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
+        backgroundSize: 'cover',
+      },
     }
   },
   computed: {
@@ -64,13 +60,13 @@ export default {
     }
   },
   onLoad(options) {
+    
     console.log(options)
     this.searchType = options.searchType
-    this.title = options.title
+    this.title = ['', '', '累计上报', '今日上报', '今日办结', '办理中'][options.searchType]
     this.girdId = options.girdId
   },
   onShow() {
-    // document.title = this.title
     this.current = 1
     this.getList()
   },
@@ -116,144 +112,147 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.list-content {
+uni-page-body {
+  height: 100%;
+  background: #F4F5FA;
+}
+.list {
   height: 100%;
-  padding: 0;
   width: 100vw;
+
   .header-content-bg {
     width: 100%;
     position: fixed;
+    z-index: -1;
     img {
       width: 100%;
       height: 592px;
     }
   }
-  .select-top {
-    background: #fff;
-    display: flex;
-    padding: 24px 0;
-
-    .tab-item {
-      flex: 1;
-      text-align: center;
-      line-height: 48px;
-      font-size: 26px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #666;
-
-      img {
-        width: 32px;
-        height: 32px;
-        margin-left: 8px;
-        vertical-align: middle;
-      }
-    }
-
-    .tab-item:nth-of-type(1) {
-      border-right: 1px solid #eee;
-    }
+  .list-content {
+    margin: 0 0 0 32px;
   }
 
-  ::v-deep .AiTopFixed .content {
-    padding: 0;
-  }
-
-  ::v-deep .AiCard {
-    background: #f3f6f9;
-    padding: 24px 40px 0 32px;
-
-    .start {
-      background: #fff;
-      border-radius: 16px;
-
-      .card-top {
-        padding: 32px;
-
-        .titles {
-          margin-bottom: 34px;
-          font-size: 32px;
-          font-weight: 500;
-          color: #333333;
-          line-height: 1.4;
-          word-break: break-all;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-        }
-
-        .types,
-        .gards {
-          margin-top: 8px;
-          font-size: 26px;
-
-          .types-right,
-          .gards-right {
-            margin-left: 32px;
-            color: #333333;
-          }
-        }
+  .item {
+    width: calc(100% - 32px);
+    background: #FFF;
+    box-shadow: 0 0 4px 0 #00000005;
+    border-radius: 16px;
+    margin-bottom: 32px;
+    .card-top {
+      width: 100%;
+      padding: 32px 32px 24px 32px;
+      box-sizing: border-box;
+      position: relative;
+      .titles {
+        width: calc(100% - 132px);
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        line-height: 44px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        font-size: 32px;
+        color: #333;
+        margin-bottom: 24px;  
+      }
+      .source-type {
+        padding: 0 10px;
+        line-height: 44px;
+        background-color: #EBF3FE;
+        border-radius: 6px;
+        font-family: PingFangSC-Regular;
+        font-size: 24px;
+        color: #3D88F5;
+        position: absolute;
+        top: 32px;
+        right: 32px;
       }
 
-      .status {
-        padding: 32px;
-        border-top: 1px solid #dddddd;
+      .info {
+        line-height: 40px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 28px;
+        color: #999;
+        margin-bottom: 8px;
 
-        .icon {
+        .value {
           display: inline-block;
-          width: 8px;
-          height: 8px;
-          vertical-align: middle;
-          margin-right: 8px;
-        }
-      }
-
-      .status0 {
-        color: #ff883c;
-
-        .icon {
-          background: #ff883c;
-        }
-      }
-
-      .status1 {
-        color: #1aaaff;
-
-        .icon {
-          background: #1aaaff;
-        }
-      }
-
-      .status2 {
-        color: #42d784;
-
-        .icon {
-          background: #42d784;
-        }
-      }
-
-      .status3 {
-        color: #ff4466;
-
-        .icon {
-          background: #ff4466;
+          margin-left: 24px;
+          color: #333;
         }
       }
     }
-  }
 
-  // ::v-deep .AiCard:last-child {
-  //   padding-bottom: 24px;
-  // }
-  .pad-b120 {
-    background-color: #f3f6f9;
-    padding-bottom: 120px;
-  }
-  .grid-name {
-    display: inline-block;
-    font-size: 32px;
-    color: #333;
+    .card-bottom {
+      display: flex;
+      justify-content: space-between;
+      padding: 32px;
+      border-top: 1px solid #ddd;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 28px;
+    }
+
+    .status {
+      .icon {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+        margin-right: 16px;
+        border-radius: 50%;
+      }
+    }
+
+    .status0 {
+      color: #ff883c;
+
+      .icon {
+        background: #ff883c;
+      }
+    }
+
+    .status1 {
+      color: #1aaaff;
+
+      .icon {
+        background: #1aaaff;
+      }
+    }
+
+    .status2 {
+      color: #42d784;
+
+      .icon {
+        background: #42d784;
+      }
+    }
+
+    .status3 {
+      color: #ff4466;
+
+      .icon {
+        background: #ff4466;
+      }
+    }
+    .level-type {
+      color: #999;
+    }
+    .level-type0 {
+      color: #52C75B;
+    }
+    .level-type1 {
+      color: #FF883C;
+    }
+    .level-type2 {
+      color: #FF3C3C;
+    }
+    
   }
 }
 </style>