提炼card组件

coreData修整
workOverView制作

src/components/common/card.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div class="card_title">
+      {{ title }}
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.card_title {
+  padding-left: 10px;
+  height: 20px;
+  line-height: 20px;
+  margin: 10px 0px;
+  font-size: 16px;
+  font-weight: bold;
+  border-left: 8px solid #98d4f3;
+}
+</style>

src/components/common/coreData.vue

@@ -3,37 +3,49 @@ export default {
   data() {
     return {
       itemWidth: 150,
-    }
+    };
   },
   props: {
-    dataList: Array
+    dataList: Array,
   },
   mounted() {
-    let clientWidth = document.getElementsByClassName("coreData")[0].clientWidth;
-    this.itemWidth = Math.floor(clientWidth/this.dataList.length)-40
-  }
-}
+    let clientWidth =
+      document.getElementsByClassName("coreData")[0].clientWidth;
+    this.itemWidth = Math.floor(clientWidth / this.dataList.length) - 40;
+  },
+};
 </script>
 
 <template>
   <div class="coreData">
-    <template v-for="(ele, index) in dataList" >
-      <div class="coreData-item" :key="index" :style="{width: itemWidth+'px', backgroundColor: ele.isHighLight?'#e7f5fc':''}">
+    <template v-for="(ele, index) in dataList">
+      <div
+        class="coreData-item"
+        :key="index"
+        :style="{
+          width: itemWidth + 'px',
+          backgroundColor: ele.isHighLight ? '#e7f5fc' : '',
+        }"
+      >
         <div class="coreData-item-title">{{ ele.title }}</div>
-        <template v-if="ele.type===1">
-
-        </template>
+        <template v-if="ele.type === 1"> </template>
         <template v-else>
           <div class="coreData-item-num">{{ ele.num }}</div>
-          <div class="coreData-item-unit">{{ ele.unit }}</div>
+          <div class="coreData-item-unit" v-html="ele.unit"></div>
           <div class="coreData-item-history">
             <div class="coreData-item-historyDesc">
-              <span v-if="ele.historyNum===0">{{ ele.historyDesc }}持平</span>
-              <span v-else-if="ele.historyNum>0">{{ ele.historyDesc }}上升</span>
-              <span v-else-if="ele.historyNum<0">{{ ele.historyDesc }}下降</span>
+              <span v-if="ele.historyNum === 0">{{ ele.historyDesc }}持平</span>
+              <span v-else-if="ele.historyNum > 0"
+                >{{ ele.historyDesc }}上升</span
+              >
+              <span v-else-if="ele.historyNum < 0"
+                >{{ ele.historyDesc }}下降</span
+              >
               <span v-else></span>
             </div>
-            <div class="coreData-item-historyNum">{{ Math.abs(ele.historyNum) }}%</div>
+            <div class="coreData-item-historyNum" v-if="!isNaN(ele.historyNum)">
+              {{ Math.abs(ele.historyNum) }}%
+            </div>
           </div>
         </template>
       </div>
@@ -44,13 +56,13 @@ export default {
 <style lang="less" scoped>
 .coreData {
   width: 100%;
-  height: 150px;
+  height: 140px;
   .coreData-item {
     display: inline-block;
     vertical-align: top;
     height: 120px;
     margin: 10px;
-    background-color: #F7FBFF;
+    background-color: #f7fbff;
     padding: 8px 8px 8px 1.5%;
     border-radius: 5px;
     .coreData-item-title {

src/components/work/overview/workOverview.vue

@@ -1,13 +1,35 @@
 <template>
-  <div class="border-shadow">
-    <workQuery></workQuery>
+  <div>
+    <div class="border-shadow">
+      <query></query>
+      <card :title="'核心指标'">
+        <CoreData :data-list="coreData"></CoreData>
+      </card>
+    </div>
+    <a-row :style="{ marginTop: '15px' }">
+      <a-col :span="18">
+        <div class="fjfb border-shadow">
+          <card :title="'房间分布'">
+            <CoreData :data-list="coreData"></CoreData>
+          </card>
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div class="drmj border-shadow">
+          <card :title="'当日门禁进出人员'"> 
+          </card>
+        </div>
+      </a-col>
+    </a-row>
   </div>
 </template>
 <script>
-import workQuery from "@/components/common/query.vue";
+import query from "@/components/common/query.vue";
+import card from "@/components/common/card.vue";
 export default {
   components: {
-    workQuery,
+    query,
+    card,
   },
   data() {
     return {
@@ -31,6 +53,56 @@ export default {
           name: "8层",
         },
       ],
+      coreData: [
+        {
+          title: "本层工位使用率",
+          num: "90%",
+          unit: "",
+          // historyDesc: "同比",
+          // historyNum: 0.4,
+        },
+        {
+          title: "工位总数",
+          num: 500,
+          unit: "个",
+          // historyDesc: "同比",
+          // historyNum: 0.4,
+        },
+        {
+          title: "办公区面积",
+          num: 380,
+          unit: "m<sup>2</sup>",
+          // historyDesc: "同比",
+          // historyNum: -0.4,
+        },
+        {
+          title: "会议室面积",
+          num: 80,
+          unit: "m<sup>2</sup>",
+          // historyDesc: "同比",
+          // historyNum: 0.4,
+        },
+        {
+          title: "领导办公室面积",
+          num: 40,
+          unit: "m<sup>2</sup>",
+          // historyDesc: "同比",
+          // historyNum: 0.4,
+        },
+        {
+          title: "其他区域面积",
+          num: 20,
+          unit: "m<sup>2</sup>",
+          // historyDesc: "同比",
+          // historyNum: 0.4,
+        },
+        // {
+        //   type: 1,
+        //   isHighLight: false,
+        //   title: "值得关注",
+        //   content: "testhnjlkjn",
+        // },
+      ],
     };
   },
   mounted() {},
@@ -47,4 +119,12 @@ export default {
   
 
 <style lang="less" scoped>
+.fjfb{
+  padding-right:15px;
+  margin-right:5px;
+}
+.drmj{
+  padding-left:15px;
+  margin-left:5px;
+}
 </style>