基础样式完成

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">
+      <div class="h flex column normal">
-        <sub-header title="全区积分排名(前10)"/>
+        <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>

project/biaopin/dv/weiyang/comps/navTabs.vue

@@ -0,0 +1,62 @@
+<script>
+export default {
+  name: "navTabs",
+  props: {
+    list: {default: []}
+  },
+  data() {
+    return {
+      active: 0
+    }
+  },
+  methods: {
+    handleClick(e, i) {
+      this.active = i
+      this.$emit("click", e)
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="navTabs">
+    <div class="item" v-for="(e, i) in list" :key="i" v-text="e.label" @click="handleClick(e,i)" :class="{active:i==active}"/>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.navTabs {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #01FFFF;
+  gap: 4px;
+
+  .item {
+    opacity: .7;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.active {
+      opacity: 1;
+
+      &:after {
+        content: " ";
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: 16px;
+        height: 2px;
+        transform: translate(-50%, 8px);
+        background: #01FFFF;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+</style>

project/biaopin/dv/weiyang/comps/valueUnit.vue

@@ -13,7 +13,7 @@ export default {
 
 <style scoped lang="scss">
 .valueUnit {
-  font-family: DINAlternate-Bold;
+  font-family: DINAlternate-Bold,serif;
   font-weight: 700;
   font-size: 22px;
   color: #02FEFF;
@@ -30,6 +30,7 @@ export default {
 
   &.mini {
     font-size: 16px;
+    line-height: 20px;
 
     & > p {
       font-size: 12px;

ui/packages/tools/AiEchart.vue

@@ -7,8 +7,6 @@
 </template>
 
 <script>
-
-
 export default {
   name: "AiEchart",
   props: {
@@ -112,7 +110,6 @@ export default {
         this.getChartData(oldDims != current)
       }
     },
-
     theme() {
       this.refresh()
     }
@@ -139,16 +136,13 @@ export default {
       this.chart.setOption(this.chartOptions || {})
     },
     watchResize() {
-      this.timer && clearInterval(this.timer)
+      window.onresize = () => {
-      this.timer = setInterval(() => {
         const {clientHeight, clientWidth} = this.$refs.AiEchart || {},
             h = this.chart?.getHeight(), w = this.chart?.getWidth()
         if (h != clientHeight || w != clientWidth) {
           this.chart?.resize()
         }
-      }, 1000)
+      }
-      //5分钟后停止监听
-      setTimeout(() => this.timer && clearInterval(this.timer), 5 * 60 * 1000)
     },
     refresh() {
       this.chart.setOption(this.chartOptions || {})
@@ -160,9 +154,6 @@ export default {
       this.initChart()
       this.getChartData()
     })
-  },
-  beforeDestroy() {
-    this.timer && clearInterval(this.timer)
   }
 }
 </script>