智慧办公-楼层概览ui

src/components/common/coreData.vue

@@ -60,12 +60,12 @@ export default {
         </div>
         <template v-if="ele.type === 1">
           <div class="coreData-high-content">
-            <span :class="IsNumeric(ele.content)?'coreData-item-num':''">{{ ele.content }}</span>
+            <span :class="isNaN(ele.content)?'':'coreData-item-num'">{{ ele.content }}{{ ele.numDesc }}</span>
           </div>
         </template>
         <template v-else>
           <div class="coreData-item-num" >
-            <span>{{ Math.abs(ele.num) }}</span>
+            <span>{{ isNaN(ele.num)?ele.num:Math.abs(ele.num) }}</span>
             <span class="anticon" v-if="ele.showTrendIcon" style="font-size: 14px;display: inline-block;margin-left: 3px">
               <i-icon-park-outline-trending-up style="color: #FF2A00" v-if="Number(ele.num)>0" />
               <i-icon-park-outline-trending-down style="color: #39E681" v-if="Number(ele.num)<0"  />

src/components/common/query.vue

@@ -2,23 +2,26 @@
   <div class="ioc-query-form">
     <a-form layout="inline" :form="formData">
       <a-form-item label="单位名称：" class="formItem">
-        <a-select style="width: 240px">
+        <a-select default-value="中迅" style="width: 200px">
           <a-select-option value="中迅"> 中迅 </a-select-option>
           <a-select-option value="电信规划院"> 电信规划院 </a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="部门名称：" class="formItem">
-        <a-select style="width: 240px">
-          <a-select-option value="中迅"> 中迅 </a-select-option>
-          <a-select-option value="电信规划院"> 电信规划院 </a-select-option>
+        <a-select default-value="市场部" style="width: 200px">
+          <a-select-option value="市场部"> 市场部 </a-select-option>
+          <a-select-option value="创新产品研发中心"> 创新产品研发中心 </a-select-option>
+          <a-select-option value="全部"> 全部 </a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="时间范围：" class="formItem">
-        <timeRange ref="timeRange"></timeRange>
+        <timeRange ref="timeRange" style="width: 250px"></timeRange>
       </a-form-item>
-      <a-form-item class="formItem">
-        <a-button type="primary">重置</a-button>
-        <a-button type="primary">查询</a-button>
+      <a-form-item class="formItem" style="float: right;margin-right: 3%">
+        <a-space size="middle">
+          <a-button type="primary" size="small" style="width: 70px;background-color: #B3B3B3;border: none;">重置</a-button>
+          <a-button type="primary" size="small" style="width: 70px;">查询</a-button>
+        </a-space>
       </a-form-item>
     </a-form>
   </div>

src/components/common/timeRange.vue

@@ -1,11 +1,5 @@
 <template>
-  <a-range-picker :disabled-date="disabledDate" :disabled-time="disabledRangeTime" :show-time="{
-    hideDisabledOptions: true,
-    defaultValue: [
-      $moment('00:00:00', 'HH:mm:ss'),
-      $moment('23:59:59', 'HH:mm:ss'),
-    ],
-  }" :format="timeFormat" />
+  <a-range-picker :disabled-date="disabledDate" :disabled-time="disabledRangeTime" :format="timeFormat" />
 </template>
 
 <script>
@@ -13,7 +7,7 @@ export default {
   props: {
     timeFormat: {
       type: String,
-      default: "YYYY-MM-DD HH:mm:ss"
+      default: "YYYY/MM/DD"
 
     }
   },

src/components/work/overview/component/workRoomDistribute.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="workRoomDistribute">
+    <div class="workRoomDistribute-example">
+      <div class="example-circle" :style="{backgroundColor: colors.leader}"></div>
+      <div class="example-desc">领导办公室</div>
+      <div class="example-circle" :style="{backgroundColor: colors.meeting}"></div>
+      <div class="example-desc">会议室</div>
+      <div class="example-circle" :style="{backgroundColor: colors.work}"></div>
+      <div class="example-desc">工作区</div>
+      <div class="example-circle" :style="{backgroundColor: colors.print}"></div>
+      <div class="example-desc">打印区</div>
+    </div>
+
+    <div class="workRoomDistribute-list">
+      <a-row :gutter="[15, 15]" >
+        <a-col  v-for="(floor, index) in roomList" :key="floor.floor" :sm="{span: 8}" :lg="{span: 6}" :xxl="{span: 4}">
+          <div class="workRoomDistribute-list-item" >
+            <div class="floor-floor"> 【{{ floor.floor }}层】 </div>
+            <div class="floor-area">
+              <div class="example-circle" :style="{backgroundColor: colors.leader}"></div>
+              <div class="example-desc">领导办公室</div>
+              <span class="floor-area-num">{{ floor.leader }}m²</span>
+            </div>
+            <div class="floor-area">
+              <div class="example-circle" :style="{backgroundColor: colors.meeting}"></div>
+              <div class="example-desc">会议室</div>
+              <span class="floor-area-num">{{ floor.leader }}m²</span>
+            </div>
+            <div class="floor-area">
+              <div class="example-circle" :style="{backgroundColor: colors.work}"></div>
+              <div class="example-desc">工作区</div>
+              <span class="floor-area-num">{{ floor.leader }}m²</span>
+            </div>
+            <div class="floor-area">
+              <div class="example-circle" :style="{backgroundColor: colors.work}"></div>
+              <div class="example-desc">工作区</div>
+              <span class="floor-area-num">{{ floor.leader }}m²</span>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      roomList: [
+        {
+          floor: '1',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '2',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '3',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '4',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '5',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '6',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '7',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '8',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '9',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '10',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '10',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '11',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '12',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '13',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        },{
+          floor: '14',
+          leader: '80',
+          meeting: '80',
+          work: '80',
+          print: '80',
+        }
+      ],
+      colors: {
+        leader: '#ffb2bf',
+        meeting: '#ffd580',
+        work: '#a6e1ff',
+        print: '#ddff99',
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.workRoomDistribute {
+  padding: 0 15px 8px;
+  .workRoomDistribute-example {
+    width: 100%;
+    height: auto;
+    margin: 12px;
+    text-align: center;
+  }
+  .example-circle {
+    display: inline-block;
+    margin: 0 8px;
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    background-color: #000;
+  }
+  .example-desc {
+    display: inline-block;
+    margin: 0 8% 0 1%;
+  }
+  .workRoomDistribute-list {
+    width: 100%;
+    .workRoomDistribute-list-item {
+      width: 100%;
+      height: 200px;
+      background-color: #f7fbff;
+      .floor-floor {
+        width: 100%;
+        text-align: center;
+        padding-top: 12px;
+        font-size: 16px;
+        letter-spacing: 2px;
+        padding-bottom: 8px;
+      }
+      .floor-area {
+        margin: 12px;
+        .example-desc {
+          color: #B3B3B3;
+        }
+        .floor-area-num {
+          color: #666666;
+          float: right;
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+
+}
+</style>

src/components/work/overview/workOverview.vue

@@ -1,48 +1,58 @@
 <template>
-  <div>
-    <div class="border-shadow">
+  <div class="workOverview">
+    <div class="page-query-core">
       <query></query>
       <card :title="'核心指标'">
         <CoreData :data-list="coreData"></CoreData>
       </card>
     </div>
-    <a-row :style="{ marginTop: '15px', height: '835px' }">
-      <a-col :span="18">
-        <div class="left border-shadow">
-          <card :title="'房间分布'"></card>
-          <div class="fjfbt"></div>
-        </div>
-      </a-col>
-      <a-col :span="6">
-        <div class="right border-shadow">
-          <card :title="'当日门禁进出人员'"> </card>
-          <div class="drmj_list">
-            <div class="total">累计进入： <span>400</span>人</div>
-            <a-table
-              :rowKey="
-                (record, index) => {
-                  return index;
-                }
-              "
-              :columns="columns"
-              :data-source="listData"
-              :pagination="false"
-              :scroll="{ y: 635 }"
-            >
-            </a-table>
+
+    <div class="workOverview-div">
+      <a-row>
+        <a-col :span="18">
+          <div class="workOverview-room">
+            <card :title="'房间分布'">
+              <div class="fjfbt" style="overflow-y: auto">
+                <WorkRoomDistribute/>
+              </div>
+            </card>
+          </div>
+        </a-col>
+        <a-col :span="6">
+          <div class="workOverview-door">
+            <card>
+              <template #title>
+                <div style="color: #333333;display: inline-block;">当日门禁进出人员</div>
+              </template>
+              <template #title-extra>
+                <div class="total">400<span>人</span></div>
+              </template>
+              <div class="workOverview-door-list">
+                <a-table :rowKey=" (record, index) => index"
+                         :columns="columns"
+                         :data-source="listData"
+                         :pagination="false"
+                         :scroll="{ y: 600 }"
+                >
+                </a-table>
+              </div>
+            </card>
           </div>
-        </div>
-      </a-col>
-    </a-row>
+        </a-col>
+      </a-row>
+    </div>
   </div>
 </template>
 <script>
 import query from "@/components/common/query.vue";
 import card from "@/components/common/card.vue";
+import WorkRoomDistribute from "@/components/work/overview/component/workRoomDistribute.vue";
+
 export default {
   components: {
     query,
     card,
+    WorkRoomDistribute,
   },
   data() {
     const listData = [];
@@ -76,65 +86,49 @@ export default {
         },
       ],
       columns: [
-        { title: "序号", dataIndex: "index", key: "1", width: 48 },
-        { title: "姓名", dataIndex: "name", key: "2", width: 60 },
-        { title: "部门", dataIndex: "department", key: "3", width: 80 },
-        { title: "最后进入时间", dataIndex: "time", key: "4", width: 95 },
+        {title: "序号", dataIndex: "index", key: "1", width: 48},
+        {title: "姓名", dataIndex: "name", key: "2", width: 60},
+        {title: "部门", dataIndex: "department", key: "3", width: 80},
+        {title: "最后进入时间", dataIndex: "time", key: "4", width: 95},
       ],
       listData: listData,
       coreData: [
         {
+          type: 1,
           title: "本层工位使用率",
-          num: "90%",
-          unit: "",
-          // historyDesc: "同比",
-          // historyNum: 0.4,
+          content: "90",
+          numDesc: "%",
         },
         {
-          title: "工位总数",
-          num: 500,
-          unit: "个",
-          // historyDesc: "同比",
-          // historyNum: 0.4,
+          type: 1,
+          title: "工位总数(个)",
+          content: 500,
         },
         {
-          title: "办公区面积",
-          num: 380,
-          unit: "m<sup>2</sup>",
-          // historyDesc: "同比",
-          // historyNum: -0.4,
+          type: 1,
+          title: "办公区面积(m²)",
+          content: 380,
         },
         {
-          title: "会议室面积",
-          num: 80,
-          unit: "m<sup>2</sup>",
-          // historyDesc: "同比",
-          // historyNum: 0.4,
+          type: 1,
+          title: "会议室面积(m²)",
+          content: 80,
         },
         {
-          title: "领导办公室面积",
-          num: 40,
-          unit: "m<sup>2</sup>",
-          // historyDesc: "同比",
-          // historyNum: 0.4,
+          type: 1,
+          title: "领导办公室面积(m²)",
+          content: 40,
         },
         {
-          title: "其他区域面积",
-          num: 20,
-          unit: "m<sup>2</sup>",
-          // historyDesc: "同比",
-          // historyNum: 0.4,
+          type: 1,
+          title: "其他区域面积(m²)",
+          content: 20,
         },
-        // {
-        //   type: 1,
-        //   isHighLight: false,
-        //   title: "值得关注",
-        //   content: "testhnjlkjn",
-        // },
       ],
     };
   },
-  mounted() {},
+  mounted() {
+  },
   methods: {
     handleChange(value) {
       console.log(`selected ${value}`);
@@ -145,28 +139,55 @@ export default {
   },
 };
 </script>
-  
+
 
 <style lang="less" scoped>
-.left {
-  padding-right: 15px;
-  margin-right: 5px;
-}
-.right {
-  padding-left: 15px;
-  margin-left: 5px;
-}
-.fjfbt,
-.drmj_list {
-  height: 50px;
-  height: 775px;
+.workOverview {
+  width: 100%;
+  height: 100%;
+  padding-bottom: 15px;
+
   .total {
-    font-size: 16px;
-    font-weight: bold;
-    height: 50px;
+    font-size: 20px;
     span {
-      font-size: 26px;
+      color: #B2B2B2;
+      font-size: 14px;
+      display: inline-block;
+      margin-left: 30px;
+      margin-right: 30px;
+    }
+  }
+
+  .workOverview-div {
+    margin-top: 12px;
+
+    .workOverview-room {
+      margin-right: 6px;
+      padding-bottom: 15px;
+    }
+
+    .workOverview-door {
+      height: 728px;
+      margin-left: 6px;
+      padding-bottom: 15px;
+      background-color: #ffffff;
+    }
+    .workOverview-door-list {
+      padding: 8px 12px;
     }
   }
 }
+
+//.left {
+//  height: 700px;
+//  margin-right: 6px;
+//}
+//.right {
+//  height: 700px;
+//  margin-left: 6px;
+//  background-color: #ffffff;
+//}
+
+//.drmj_list {
+//}
 </style>