基础样式完成

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -5,10 +5,12 @@ import IconStaPanel from "./comps/iconStaPanel.vue";
 import IconSmallPanel from "./comps/iconSmallPanel.vue";
 import ValueUnit from "./comps/valueUnit.vue";
 import ChargingPercent from "./comps/chargingPercent.vue";
+import AiEchart from "dui/packages/tools/AiEchart.vue";
+import NavTabs from "./comps/navTabs.vue";
 
 export default {
   name: "AppDvWeiyang",
-  components: {ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
+  components: {NavTabs, AiEchart, ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
   label: "未央最新定制大屏",
   props: {
     instance: Function,
@@ -34,6 +36,20 @@ export default {
       {label: "办理中", value: 0, unit: "个"},
       {label: "待受理", value: 0, unit: "个"},
       {label: "延期", value: 0, unit: "个", isRed: !0},
+    ],
+    workorderTable: v => ({
+      header: ['时间', '状态', '事件描述'],
+      headerBGC: '#21b4fd1a',
+      oddRowBGC: "transparent",
+      evenRowBGC: "transparent",
+      data: []
+    }),
+    tabs: v => [
+      {label: "楼栋长", value: ""},
+      {label: "治安协理员", value: ""},
+      {label: "业委会", value: ""},
+      {label: "网格员", value: ""},
+      {label: "第三方机构", value: ""},
     ]
   },
   methods: {
@@ -85,7 +101,15 @@ export default {
           <div class="flex fill">年同比<p class="minus" v-text="0"/></div>
         </div>
       </div>
-      <div class="b2"></div>
+      <div class="b2 pad-v8 pad-h12 flex column normal font-12">
+        <div v-text="`AI咨询服务累计数`"/>
+        <value-unit :value="0" unit="次" color="#fff"/>
+        <ai-echart/>
+        <div class="flex">
+          日服务处理量
+          <value-unit class="mar-l8" :value="0" unit="次" size="mini"/>
+        </div>
+      </div>
       <div class="c flex column center">
         <div class="mar-b40" v-text="'工单处置率'"/>
         <charging-percent label="已完成工单" :value="80"/>
@@ -98,23 +122,31 @@ export default {
         </div>
       </div>
       <div class="d"></div>
-      <div class="e">
+      <div class="e flex column normal">
         <sub-header title="五条工作链"/>
+        <ai-echart/>
       </div>
       <div class="f"></div>
-      <div class="g">
+      <div class="g flex column normal">
         <sub-header title="工单分类"/>
+        <ai-echart/>
+        <dv-scroll-board class="pad-h12" :config="workorderTable"/>
       </div>
-      <div class="h">
-        <sub-header title="全区积分排名(前10)"/>
+      <div class="h flex column normal">
+        <sub-header title="全区积分排名(前10)">
+          <nav-tabs class="pad-r8" slot="right" :list="tabs"/>
+        </sub-header>
+        <ai-echart/>
       </div>
-      <div class="i">
+      <div class="i flex column normal">
         <sub-header title="居民统计">
           <div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
         </sub-header>
+        <ai-echart/>
       </div>
-      <div class="j">
+      <div class="j flex column normal">
         <sub-header title="特殊人群数量统计"/>
+        <ai-echart/>
       </div>
     </template>
   </section>
@@ -123,6 +155,10 @@ export default {
 .AiDvWrapper {
   .viewPanel {
     background-image: url("https://cdn.sinoecare.com/i/2024/09/03/66d6a644bcc6e.png");
+
+    & > .primary, & > .fill {
+      padding: 0 24px !important;
+    }
   }
 }
 </style>
@@ -132,9 +168,9 @@ export default {
   color: #fff;
   display: grid;
   gap: 10px;
-  grid-template-columns: repeat(8, 1fr);
   padding: 16px 0;
   grid-auto-rows: 128px;
+  grid-template-columns: 245px 245px 240px 240px 180px 180px 230px 1fr;
   grid-template-areas:
   "a a1 b b1 b2 b2 c c1"
   "e e f f f f c c1"
@@ -236,5 +272,11 @@ export default {
       color: #FF2727;
     }
   }
+
+  @each $s in (12, 14, 16, 20, 24, 36) {
+    .font-#{$s} {
+      font-size: #{$s}px;
+    }
+  }
 }
 </style>