会议管理时间轴添加日期描述；看板消息待阅已阅调整样式

src/components/common/timeLine.vue

@@ -89,11 +89,7 @@ export default {
         for (let i = 0; i <= that.timekedu.length - 1; i++) {
           // 时间刻度 宽度
           that.$refs["xiaoshikd" + i][0].style.width =
-            "calc(" +
-            1 * 100 +
-            "% / " +
-            totalTimeHour +
-            ")";
+            "calc(" + 1 * 100 + "% / " + totalTimeHour + ")";
         }
         that.setHuiYi();
       }, 100);
@@ -228,4 +224,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/dashboard/message/dashboardMessageCard.vue

@@ -3,41 +3,53 @@ import DashboardMsgList from "@/components/dashboard/message/dashboardMsgList.vu
 export default {
   data() {
     return {
-      currKey: '1',
+      currKey: "1",
       msgList: [
         {
           isRead: true,
           type: 1,
-          msg: '1903照明设备损坏'
-        },{
+          msg: "1901照明设备损坏",
+        },
+        {
           isRead: true,
           type: 2,
-          msg: '1903照明设备损坏1903照明设备损坏1903照明设备损坏1903照明设备损坏1903照明设备损坏1903照明设备损坏'
-        },{
+          msg: "1902照明设备损坏1903照明设备损坏1903照明设备损坏1903照明设备损坏1903照明设备损坏1903照明设备损坏",
+        },
+        {
           isRead: false,
           type: 3,
-          msg: '1903照明设备损坏'
-        },{
+          msg: "1903照明设备损坏",
+        },
+        {
           isRead: true,
-          msg: '1903照明设备损坏'
-        }
-      ]
-    }
+          type: 2,
+          msg: "1904照明设备损坏",
+        },
+      ],
+      isReadMsgList: [],
+      notReadMsgList: [],
+    };
   },
   components: {
-    DashboardMsgList
+    DashboardMsgList,
   },
   mounted() {
+    this.isReadMsgList = this.msgList.filter((v) => {
+      return v.isRead === true;
+    });
+    this.notReadMsgList = this.msgList.filter((v) => {
+      return v.isRead === false;
+    });
   },
   methods: {
     callback(key) {
-      this.currKey = key
+      this.currKey = key;
     },
     toMsg() {
-      this.$router.push({path: '/notice'})
-    }
-  }
-}
+      this.$router.push({ path: "/notice" });
+    },
+  },
+};
 </script>
 
 <template>
@@ -46,14 +58,29 @@ export default {
       <a-tab-pane key="1" tab="全部消息">
         <DashboardMsgList :data="msgList"></DashboardMsgList>
       </a-tab-pane>
-      <a-tab-pane key="2" tab="待阅" force-render>
-        <DashboardMsgList ></DashboardMsgList>
+      <a-tab-pane key="2" force-render>
+        <template slot="tab">
+          <div class="text">待阅</div>
+          <div class="info-dot"></div>
+        </template>
+        <DashboardMsgList :data="notReadMsgList"></DashboardMsgList>
       </a-tab-pane>
       <a-tab-pane key="3" tab="已阅">
-        <DashboardMsgList ></DashboardMsgList>
+        <DashboardMsgList :data="isReadMsgList"></DashboardMsgList>
       </a-tab-pane>
     </a-tabs>
-    <div v-if="currKey == '1'"  @click="toMsg" style="float: right;margin-right: 8px;margin-top: 8px;color: #C6C8CC;font-size: 12px;cursor:pointer;">
+    <div
+      v-if="currKey == '1'"
+      @click="toMsg"
+      style="
+        float: right;
+        margin-right: 8px;
+        margin-top: 8px;
+        color: #c6c8cc;
+        font-size: 12px;
+        cursor: pointer;
+      "
+    >
       查看全部
       <a-icon type="right"></a-icon>
     </div>
@@ -65,7 +92,6 @@ export default {
   padding-left: 5%;
   width: 100%;
   height: 100px;
-
 }
 </style>
 
@@ -75,7 +101,7 @@ export default {
     visibility: hidden;
   }
   .ant-tabs-nav {
-    color: #B3B3B3;
+    color: #b3b3b3;
     margin-right: 5px !important;
   }
   .ant-tabs-nav .ant-tabs-tab {
@@ -83,9 +109,23 @@ export default {
     padding-left: 0 !important;
     padding-right: 20%;
   }
+
+  .ant-tabs-nav .ant-tabs-tab:nth-child(2) {
+    .text {
+      position: relative;
+    }
+    .info-dot {
+      position: absolute;
+      width: 6px;
+      height: 7px;
+      background: red;
+      border-radius: 80%;
+      top: 10px;
+      left: 26px;
+    }
+  }
   .ant-tabs-nav .ant-tabs-tab-active {
     color: #333333;
   }
 }
 </style>
-

src/components/dashboard/message/dashboardMsgList.vue

@@ -2,34 +2,52 @@
 export default {
   data() {
     return {
-      contentWidth: '60%'
-    }
+      contentWidth: "60%",
+    };
   },
   props: {
-    data: Array
+    data: Array,
   },
   mounted() {
-    let width = this.$refs.dashboardMsgList.$el.clientWidth
-    this.contentWidth = width * 0.7 + 'px'
+    let width = this.$refs.dashboardMsgList.$el.clientWidth;
+    this.contentWidth = width * 0.7 + "px";
   },
-  methods: {}
-}
+  methods: {},
+};
 </script>
 
 <template>
-  <a-list class="dashboardMsgList" item-layout="horizontal" :data-source="data" :split="false" ref="dashboardMsgList">
-    <a-list-item slot="renderItem" slot-scope="item, index">
+  <a-list
+    class="dashboardMsgList"
+    item-layout="horizontal"
+    :data-source="data"
+    :split="false"
+    ref="dashboardMsgList"
+  >
+    <a-list-item slot="renderItem" slot-scope="item">
       <a-row style="width: 100%" justify="start">
         <div style="width: 100%">
-          <span v-if="item.isRead">【已阅】</span>
+          <span v-if="item.isRead" style="color: rgba(153,153,153,0.58);">【已阅】</span>
           <span v-else>【待阅】</span>
 
-          <span class="msg-warn" v-if="item.type==1" style="color: #5495F1">①</span>
-          <span class="msg-warn" v-else-if="item.type==2" style="color: #3BC5B0">②</span>
-          <span class="msg-warn" v-else-if="item.type==3" style="color: #F1934E">③</span>
-          <span class="msg-warn" v-else ></span>
+          <span class="msg-warn" v-if="item.type == 1" style="color: #5495f1"
+            >①</span
+          >
+          <span
+            class="msg-warn"
+            v-else-if="item.type == 2"
+            style="color: #3bc5b0"
+            >②</span
+          >
+          <span
+            class="msg-warn"
+            v-else-if="item.type == 3"
+            style="color: #f1934e"
+            >③</span
+          >
+          <span class="msg-warn" v-else></span>
 
-          <span class="msg-content-span" >{{ item.msg }}</span>
+          <span :class="{isReadClass:item.isRead===true}" class="msg-content-span">{{ item.msg }}</span>
         </div>
       </a-row>
     </a-list-item>
@@ -70,6 +88,9 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    &.isReadClass{
+      color: rgba(153,153,153,0.58);
+    }
   }
 }
-</style>
+</style>

src/components/work/meeting/workMeeting.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="workMeeting">
     <div class="page-query-core">
-      <query :show="['company', 'floor', 'time']" :query-data.sync="queryData"  :reset="reset" :search="search"></query>
+      <query
+        :show="['company', 'floor', 'time']"
+        :query-data.sync="queryData"
+        :reset="reset"
+        :search="search"
+      ></query>
       <card :title="'核心指标'">
         <CoreData :data-list="coreData"></CoreData>
       </card>
@@ -15,88 +20,138 @@
               <a-row>
                 <a-col :span="2">
                   <a-menu
-                      style="width: 100%"
-                      :default-selected-keys="defaultSelectedKeys"
-                      mode="inline"
-                      @click="huiyiClick"
+                    style="width: 100%"
+                    :default-selected-keys="defaultSelectedKeys"
+                    mode="inline"
+                    @click="huiyiClick"
                   >
                     <!-- style="width: 100px" -->
                     <!-- :open-keys.sync="openKeys" -->
-                    <a-menu-item v-for="(item, index) in tabsArr" :key="index + ''">
+                    <a-menu-item
+                      v-for="(item, index) in tabsArr"
+                      :key="index + ''"
+                    >
                       {{ item.title }}
                     </a-menu-item>
                   </a-menu>
                 </a-col>
-                <a-col :span="22">
+                <a-col :span="3">
+                  <div class="week-box" v-for="n in timeArr" :key="n">
+                    <div class="week">{{ n.weekday }}</div>
+                    <div class="date">{{ n.date }}</div>
+                  </div>
+                </a-col>
+                <a-col :span="19">
                   <timeline
-                      v-for="(item, index) in tabsItemArr"
-                      :key="index"
-                      v-bind="{
-                        startTime: 8,
-                        endTime: 17,
-                        huiyiInfo: item.shiyong,
-                      }"
-                      :style="{ height: '60px' }"
+                    v-for="(item, index) in tabsItemArr"
+                    :key="index"
+                    v-bind="{
+                      startTime: 8,
+                      endTime: 17,
+                      huiyiInfo: item.shiyong,
+                    }"
+                    :style="{ height: '60px' }"
                   ></timeline>
                 </a-col>
               </a-row>
               <div class="workMeeting-left-detail">
                 <a-descriptions :column="2" :colon="false">
-                  <a-descriptions-item >
+                  <a-descriptions-item>
                     <template #label>
-                      <span class="workMeeting-left-detail-label">会议主题:</span>
+                      <span class="workMeeting-left-detail-label"
+                        >会议主题:</span
+                      >
                     </template>
-                    <div class="workMeeting-left-detail-content">智慧楼宇产品会议</div>
+                    <div class="workMeeting-left-detail-content">
+                      智慧楼宇产品会议
+                    </div>
                   </a-descriptions-item>
-                  <a-descriptions-item >
+                  <a-descriptions-item>
                     <template #label>
-                      <span class="workMeeting-left-detail-label">会议配置:</span>
+                      <span class="workMeeting-left-detail-label"
+                        >会议配置:</span
+                      >
                     </template>
-                    <div class="workMeeting-left-detail-content">智慧会议场景配置1</div>
+                    <div class="workMeeting-left-detail-content">
+                      智慧会议场景配置1
+                    </div>
                   </a-descriptions-item>
-                  <a-descriptions-item >
+                  <a-descriptions-item>
                     <template #label>
-                      <span class="workMeeting-left-detail-label">预约部门:</span>
+                      <span class="workMeeting-left-detail-label"
+                        >预约部门:</span
+                      >
                     </template>
-                    <div class="workMeeting-left-detail-content">北京电信规划设计院-创新产品研发中心</div>
+                    <div class="workMeeting-left-detail-content">
+                      北京电信规划设计院-创新产品研发中心
+                    </div>
                   </a-descriptions-item>
                   <a-descriptions-item>
                     <template #label>
-                      <span class="workMeeting-left-detail-label">会议成本:</span>
+                      <span class="workMeeting-left-detail-label"
+                        >会议成本:</span
+                      >
                     </template>
-                    <div class="workMeeting-left-detail-content" style="background-color: #ffffff">30元/小时</div>
+                    <div
+                      class="workMeeting-left-detail-content"
+                      style="background-color: #ffffff"
+                    >
+                      30元/小时
+                    </div>
                   </a-descriptions-item>
-                  <a-descriptions-item >
+                  <a-descriptions-item>
                     <template #label>
-                      <span class="workMeeting-left-detail-label">参会人员:</span>
+                      <span class="workMeeting-left-detail-label"
+                        >参会人员:</span
+                      >
                     </template>
-                    <div style="width: 100%;vertical-align: top">
-                      <div style="display: inline-block;vertical-align: top;margin: 1px 3px">
-                        <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+                    <div style="width: 100%; vertical-align: top">
+                      <div
+                        style="
+                          display: inline-block;
+                          vertical-align: top;
+                          margin: 1px 3px;
+                        "
+                      >
+                        <a-avatar
+                          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+                        />
                         <div>张三</div>
                       </div>
                     </div>
                   </a-descriptions-item>
-                  <a-descriptions-item >
+                  <a-descriptions-item>
                     <template #label>
-                      <span class="workMeeting-left-detail-label">会议费用:</span>
+                      <span class="workMeeting-left-detail-label"
+                        >会议费用:</span
+                      >
                     </template>
-                    <div class="workMeeting-left-detail-content" style="background-color: #ffffff">35元/小时</div>
+                    <div
+                      class="workMeeting-left-detail-content"
+                      style="background-color: #ffffff"
+                    >
+                      35元/小时
+                    </div>
                   </a-descriptions-item>
                 </a-descriptions>
               </div>
             </card>
-
           </div>
         </a-col>
         <a-col :span="6">
           <div class="workMeeting-right ioc-card-content">
             <card title="成本趋势">
               <template #title-extra>
-                <div style="font-size: 18px;color: #4D4D4D;margin-top: 3px">成本集中</div>
+                <div style="font-size: 18px; color: #4d4d4d; margin-top: 3px">
+                  成本集中
+                </div>
               </template>
               <div class="cben">
-                <WorkMeetingCostTrend ref="WorkMeetingCostTrend" :queryData="queryData" :height="475" />
+                <WorkMeetingCostTrend
+                  ref="WorkMeetingCostTrend"
+                  :queryData="queryData"
+                  :height="475"
+                />
               </div>
             </card>
           </div>
@@ -132,16 +187,43 @@ export default {
     }
     let timeRange = this.$util.dateUtil.getNearlyMonthRange();
     return {
+      timeArr: [
+        {
+          id: 1,
+          weekday: "周一",
+          date: "",
+        },
+        {
+          id: 2,
+          weekday: "周二",
+          date: "",
+        },
+        {
+          id: 3,
+          weekday: "周三",
+          date: "",
+        },
+        {
+          id: 4,
+          weekday: "周四",
+          date: "",
+        },
+        {
+          id: 5,
+          weekday: "周五",
+          date: "",
+        },
+      ],
       queryData: {
-        companyId: '0',
-        floorId: '0',
+        companyId: "0",
+        floorId: "0",
         timeRange: timeRange,
       },
       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: 90},
+        { 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: 90 },
       ],
       listData: listData,
       coreData: [
@@ -520,19 +602,33 @@ export default {
   mounted() {
     this.changeTab(1);
     this.init();
+    this.setDate();
   },
   methods: {
     init() {
-      this.$store.loadingStore().loadingWithApi(this.getCoreData(), 2000)
+      this.$store.loadingStore().loadingWithApi(this.getCoreData(), 2000);
     },
-    reset() {
-
+    setDate() {
+      this.timeArr = this.timeArr.map((v) => {
+        return {
+          id: v.id,
+          weekday: v.weekday,
+          date: this.$moment().weekday(v.id).format("YYYY/MM/DD"),
+        };
+      });
+      // for(let i=1;i<=5;i++){
+      //   this.timeArr.push({
+      //     weekday:this.$moment().weekday(i).format(),
+      //     date:this.$moment().weekday(i).format("YYYY/MM/DD")
+      //   })
+      // }
     },
+    reset() {},
     search() {
       this.$util.asyncPromise(
-          this.getCoreData(),
-          this.$refs.WorkMeetingCostTrend.getData(),
-      )
+        this.getCoreData(),
+        this.$refs.WorkMeetingCostTrend.getData()
+      );
     },
     handleChange(value) {
       console.log(`selected ${value}`);
@@ -547,23 +643,22 @@ export default {
       this.tabsItemArr = this.tabsArr[index].content;
     },
     getCoreData() {
-      return apiWorkMeeting.getCoreData(this.queryData).then(res=>{
-        this.coreData[0].num = res.list[0].value
-        this.coreData[0].historyNum = res.list[0].compare
-        this.coreData[1].num = res.list[1].value
-        this.coreData[1].historyNum = res.list[1].compare
-        this.coreData[2].num = res.list[2].value
-        this.coreData[2].historyNum = res.list[2].compare
-        this.coreData[3].num = res.list[3].value
-        this.coreData[3].historyNum = res.list[3].compare
-        this.coreData[4].content = res.worthAttention
-      })
-    }
+      return apiWorkMeeting.getCoreData(this.queryData).then((res) => {
+        this.coreData[0].num = res.list[0].value;
+        this.coreData[0].historyNum = res.list[0].compare;
+        this.coreData[1].num = res.list[1].value;
+        this.coreData[1].historyNum = res.list[1].compare;
+        this.coreData[2].num = res.list[2].value;
+        this.coreData[2].historyNum = res.list[2].compare;
+        this.coreData[3].num = res.list[3].value;
+        this.coreData[3].historyNum = res.list[3].compare;
+        this.coreData[4].content = res.worthAttention;
+      });
+    },
   },
 };
 </script>
 
-
 <style lang="less" scoped>
 .workMeeting {
   .workMeeting-left {
@@ -571,13 +666,38 @@ export default {
     padding: 2px 15px;
     border-radius: 4px;
     margin-right: 6px;
+    .ant-col-3 {
+      .week-box {
+        height: 60px;
+        width: 100%;
+        position: relative;
+        color: rgb(77, 77, 77,0.2);;
+        .week {
+          width: 80%;
+          height: 50%;
+          position: absolute;
+          top: 0;
+          right: 0;
+          display: flex;
+          align-items: center;
+        }
+        .date {
+          width: 80%;
+          height: 50%;
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          margin: 0 auto;
+        }
+      }
+    }
     .workMeeting-left-detail {
       margin-top: 30px;
       padding: 0 20px;
       margin-bottom: 12px;
       .workMeeting-left-detail-label {
         vertical-align: top;
-        color: #B2B2B2;
+        color: #b2b2b2;
       }
       .workMeeting-left-detail-content {
         width: 100%;
@@ -602,6 +722,4 @@ export default {
     margin-left: 6px;
   }
 }
-
-
-</style>
+</style>