调整了作业执行详情中的消息列表展示ui

src/components/TimeLine/card.vue

@@ -1,211 +0,0 @@
-<template>
-  <div class="item-content-card" @click="goDetail()">
-    <div class="time-title" :class="statusStyle(cardData.status)">
-      <i class="el-icon-time"></i>
-      <!-- {{ cardData.createTime.slice(-8) }} -->
-      <div class="item-status"><b>{{ formatStatus(cardData.status) }}</b></div>
-    </div>
-    <div class="time-content">
-      <div class="time-content-no">
-        <div class="time-content-no-circle" :class="{'time-content-delete' : cardData.type!=1}"></div>
-        {{ cardData.workNo }}
-      </div>
-      <div class="time-content-name">
-        <span>{{ cardData.name }}</span>
-        新增/导入/删除
-        <div v-if="showRevoke()" class="opera-icon-back" title="撤销" @click.stop="revokeWorkFlow"></div>
-        <div v-if="showRevoke() && cardData.status == 4" class="opera-icon-edit" title="编辑" @click.stop="editWorkFlow"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'TheWorkNoteCard',
-  props: {
-    cardData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  methods: {
-    // 跳转详情页面
-    goDetail() {
-      this.$router.push({});
-    },
-    // 显示撤销
-    showRevoke() {
-      // 判断符合条件的逻辑
-    },
-    // 撤销
-    revokeWorkFlow() {
-    },
-    // 编辑被驳回
-    editWorkFlow() {
-    },
-    statusStyle(v) {
-      if (String(v) === '2') {
-        return 'time-status-unreview';
-      } else if (String(v) === '3') {
-        return 'time-status-success';
-      } else if (String(v) === '4' || String(v) === '5') {
-        return 'time-status-back';
-      } else {
-        return 'time-status-unreview';
-      }
-    },
-    formatStatus(v) {
-      if (String(v) === '2') { // 待审核
-        return '待审核';
-      } else if (String(v) === '3') { // 通过
-        return '通过';
-      } else if (String(v) === '4') { // 驳回
-        return '驳回';
-      } else if (String(v) === '5') { // 撤销
-        return '撤销';
-      } else {
-        return '--';
-      }
-    },
-  }
-};
-</script>
-
-<style scoped lang="scss">
-.item-content-card {
-  cursor: pointer;
-  border-radius: 4px;
-  background-color: #f7f9fa;
-  margin-bottom: 10px;
-
-  .time-title {
-    position: relative;
-    box-sizing: border-box;
-    height: 50px;
-    padding: 15px;
-    border-bottom: 1px solid #e4e4e4;
-
-    i {
-      font-size: 16px;
-    }
-
-    .item-status {
-      position: absolute;
-      font-size: 12px;
-      top: 13px;
-      right: 0;
-      width: 40px;
-      text-align: center;
-      z-index: 1;
-      transform: rotate(45deg)
-    }
-
-    &:after {
-      content: "";
-      position: absolute;
-      top: 0;
-      right: 0;
-      border-style: solid;
-      border-width: 25px 25px 25px 25px;
-      width: 0px;
-      height: 0px;
-    }
-  }
-
-  .time-status-unreview {
-    .item-status {
-      color: #409EFF;
-    }
-
-    &:after {
-      border-color: #d3e7fb #d3e7fb transparent transparent;
-    }
-  }
-
-  .time-status-success {
-    .item-status {
-      color: #67C23A;
-    }
-
-    &:after {
-      border-color: #dbeed4 #dbeed4 transparent transparent;
-    }
-  }
-
-  .time-status-back {
-    .item-status {
-      color: #E6A23C;
-    }
-
-    &:after {
-      border-color: #f4e7d4 #f4e7d4 transparent transparent;
-    }
-  }
-
-  .time-content {
-    padding: 15px;
-
-    .time-content-no {
-      margin-bottom: 10px;
-
-      .time-content-no-circle {
-        width: 10px;
-        height: 10px;
-        display: inline-block;
-        background-color: #8ec850;
-        border-radius: 50%;
-        margin-right: 6px;
-      }
-
-      .time-content-delete {
-        background-color: #666666;
-      }
-    }
-
-    .time-content-name {
-      line-height: 20px;
-      padding-left: 20px;
-
-      span {
-        margin-right: 20px;
-      }
-
-      .opera-icon-back {
-        margin-left: 30px;
-        display: inline-block;
-        width: 18px;
-        height: 18px;
-        cursor: pointer;
-        //background: url('../images/rollback.png') no-repeat;
-        background-size: 18px;
-
-        &:hover {
-          // background: url('../images/rollback_h.png') no-repeat;
-          background-size: 18px;
-        }
-      }
-
-      .opera-icon-edit {
-        margin-left: 5px;
-        display: inline-block;
-        width: 18px;
-        height: 18px;
-        cursor: pointer;
-        //background: url('../images/edit.png') no-repeat;
-        background-size: 18px;
-
-        &:hover {
-          //background: url('../images/edit_h.png') no-repeat;
-          background-size: 18px;
-        }
-      }
-    }
-  }
-
-  &:hover {
-    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.176470588235294)
-  }
-}
-</style>

src/components/TimeLine/timeline.vue

@@ -1,181 +0,0 @@
-<template>
-  <div class="timeline-main">
-    <!--年月标题-->
-    <div class="timeline-title">
-      {{ timeData.yearData }}
-      <i
-        :class="showCards ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
-        @click="showCards = !showCards"
-      ></i>
-    </div>
-    <ul class="timeline-body">
-      <!--时间线顶部圆点-->
-      <li class="timeline-item-head">
-        <div class="item-node"></div>
-        <div class="item-tail"></div>
-      </li>
-      <!--时间线内容-->
-      <template v-if="showCards">
-        <li
-          v-for="(mouthItem, i) in timeData.mouthData"
-          :key="'mm' + i"
-          class="timeline-item"
-        >
-          <div class="item-left">
-            <div class="item-left-data">{{ mouthItem.dateData }}</div>
-            <div class="item-left-total">
-              <div class="item-left-total-text">
-                共{{ mouthItem.dateArr.length }}条
-              </div>
-              <div class="item-left-total-end"></div>
-            </div>
-          </div>
-          <div class="item-tail"></div>
-          <div class="item-node"></div>
-          <div class="item-content">
-            <slot name="cardSlot" v-for="v in mouthItem.dateArr" :card="v"></slot>
-          </div>
-        </li>
-      </template>
-      <!--时间线尾部圆点-->
-      <li class="timeline-item-foot">
-        <div class="item-node"></div>
-        <div class="item-tail"></div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Timeline",
-  props: {
-    timeData: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      showCards: true,
-    };
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.timeline-main {
-  padding: 0 0 0 20px;
-
-  .timeline-title {
-    margin-bottom: 10px;
-    font-weight: bold;
-
-    i {
-      cursor: pointer;
-    }
-  }
-
-  .timeline-body {
-    margin: 0;
-    font-size: 14px;
-    list-style: none;
-    // 顶尾圆圈
-    .timeline-item-head,
-    .timeline-item-foot {
-      position: relative;
-      height: 15px;
-
-      .item-tail {
-        position: absolute;
-        left: 45px;
-        height: 100%;
-        border-left: 2px solid #e4e7ed;
-      }
-
-      .item-node {
-        position: absolute;
-        left: 42px;
-        width: 8px;
-        height: 8px;
-        background-color: #e4e7ed;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-
-    .timeline-item-foot {
-      .item-node {
-        top: 14px;
-      }
-    }
-
-    // 时间线主体内容
-    .timeline-item {
-      position: relative;
-      padding-bottom: 10px;
-
-      .item-left {
-        position: absolute;
-        top: 13px;
-        left: -9px;
-
-        .item-left-data {
-          font-weight: bold;
-          line-height: 20px;
-        }
-
-        .item-left-total {
-          display: flex;
-          font-size: 12px;
-
-          .item-left-total-text {
-            padding: 0 3px;
-            line-height: 20px;
-            color: #ffffff;
-            background: #409eff;
-          }
-
-          .item-left-total-end {
-            width: 0;
-            height: 0;
-            border-top: 10px solid transparent;
-            border-left: 6px solid #409eff;
-            border-bottom: 10px solid transparent;
-          }
-        }
-      }
-
-      .item-tail {
-        position: absolute;
-        left: 45px;
-        height: 100%;
-        border-left: 2px solid #e4e7ed;
-      }
-
-      .item-node {
-        position: absolute;
-        top: 38px;
-        left: 41px;
-        width: 6px;
-        height: 6px;
-        background-color: #ffffff;
-        border: 2px solid #409eff;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .item-content {
-        position: relative;
-        padding-top: 15px;
-        padding-left: 60px;
-        // top: -3px;
-      }
-    }
-  }
-}
-</style>

src/views/mes/job/jobplay/jobPlayDetail.vue

@@ -1,35 +1,34 @@
 <template>
   <div>
-    <el-row style="box-shadow: 2px 2px 15px rgba(213, 224, 227, 0.6)">
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span style="font-weight: bolder">作业状态</span>
-        </div>
-        <el-table
-          :data="jobTicket"
-          :header-cell-style="{ 'text-align': 'center' }"
-          :cell-style="{ 'text-align': 'center' }"
-        >
-          <el-table-column label="作业编号" prop="ticketCode">
-          </el-table-column>
-          <el-table-column label="作业名称" prop="ticketCode">
-          </el-table-column>
-          <el-table-column label="状态" align="center" prop="ticketStatus">
-            <template slot-scope="scope">
-              <dict-tag
-                :options="dict.type.ticket_status"
-                :value="scope.row.ticketStatus"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column label="上锁钥匙" prop="lockKeyName">
-          </el-table-column>
-          <el-table-column label="解锁钥匙" prop="colockKeyName">
-          </el-table-column>
-        </el-table>
-      </el-card>
-    </el-row>
-    <el-row style="margin-top: 10px; height: 620px; overflow-y: auto">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span style="font-weight: bolder">作业状态</span>
+      </div>
+      <el-table
+        :data="jobTicket"
+        :header-cell-style="{ 'text-align': 'center' }"
+        :cell-style="{ 'text-align': 'center' }"
+      >
+        <el-table-column label="作业编号" prop="ticketCode">
+        </el-table-column>
+        <el-table-column label="作业名称" prop="ticketCode">
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="ticketStatus">
+          <template slot-scope="scope">
+            <dict-tag
+              :options="dict.type.ticket_status"
+              :value="scope.row.ticketStatus"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="上锁钥匙" prop="lockKeyName">
+        </el-table-column>
+        <el-table-column label="解锁钥匙" prop="colockKeyName">
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <div style="margin-top: 10px; height: 620px; overflow-y: auto">
       <el-col :span="6" style="height: 1000px">
         <el-card class="box-card1">
           <div slot="header" class="clearfix">
@@ -158,25 +157,29 @@
           </el-table>
         </el-card>
       </el-col>
-    </el-row>
+    </div>
     <div class="message-list">
-      <h1>kakkak</h1>
+      <div class="message_title">作业执行-操作日志</div>
+      <el-timeline style="padding-top: 15px">
+        <el-timeline-item v-for="(v,i) in items" :timestamp="v.date" :key="i" placement="top" color="#0bbd87">
+          <el-card style="width: 450px">
+            <h4>{{ v.index }}</h4>
+            <p>{{ v.content }}</p>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
     </div>
   </div>
 </template>
 
 <script>
 import { getJobPlayTicketInfo } from '@/api/mes/jobplay/jobplay'
-import { connectWebsocket, closeWebsocket, sendMsg } from "@/utils/websocket";
-import timeline from '@/components/TimeLine/timeline.vue'
-import card from "@/components/TimeLine/card.vue"
+import { connectWebsocket, closeWebsocket, sendMsg } from '@/utils/websocket'
+
 export default {
   name: 'jobPlayDetail',
   dicts: ['ticket_type', 'ticket_status'],
-  components: {
-    timeline,
-    card
-  },
+
   data() {
     return {
       jobTicket: [],
@@ -185,12 +188,32 @@ export default {
       ticketPointsList: [],
       ticketId: null,
       intervalId: null,
-      uni_data:[],
-      isFetching: false, // 标志位，控制接口请求是否已经执行过
+      items: [
+        {
+          index: '2020-8-14 13:20:30',
+          content: '开始毕设。。',
+          date: '2018/5/4'
+        },
+        { index: '2020-8-15 13:20:30', content: '写前端。。', date: '2018/5/5' },
+        {
+          index: '2020-8-16 13:20:30',
+          content: '还在写前端。。',
+          date: '2018/5/6'
+        },
+        {
+          index: '2020-8-17 13:20:30',
+          content: '仍在写前端。。',
+          date: '2018/5/7'
+        },
+        { index: '2020-8-18 13:20:30', content: '不想写前端。。', date: '2018/5/8' },
+        { index: '2020-8-19 13:20:30', content: '还得写前端。。。。。', date: '2018/5/9' }
+      ],
+
+      isFetching: false // 标志位，控制接口请求是否已经执行过
     }
   },
-  watch:{
-    "$route.query.ticketId": {
+  watch: {
+    '$route.query.ticketId': {
       immediate: true,
       handler(newValue, oldValue) {
         this.getJobPlayInfo()
@@ -198,7 +221,7 @@ export default {
     },
     $route(to, from) {
       if (to.path === '/mes/job/jobplay/jobPlayDetail') {
-        this.initWebSocket();
+        this.initWebSocket()
       }
     }
   },
@@ -232,57 +255,57 @@ export default {
         this.ticketPointsList = res.data.ticketPointsList
       })
     },
-    initWebSocket(){
-      const timestep= Date.now();
-      connectWebsocket(`ws://192.168.1.127:9090/websocket/jobTicket/${timestep}`,{w:'S',},(res)=>{
-        console.log(res,'websocket接收服务器的数据');
-        const resMsg=res
-        if(resMsg=='refresh'){
-          this.handleRefresh();
-        }
-      },
-        (err)=>{
-        console.log('断开重连',);
+    initWebSocket() {
+      const timestep = Date.now()
+      connectWebsocket(`ws://192.168.1.127:9090/websocket/jobTicket/${timestep}`, { w: 'S' }, (res) => {
+          console.log(res, 'websocket接收服务器的数据')
+          const resMsg = res
+          if (resMsg == 'refresh') {
+            this.handleRefresh()
+          }
+        },
+        (err) => {
+          console.log('断开重连')
         })
     },
     handleRefresh() {
       if (this.isFetching) {
-        console.log('接口请求正在进行中，忽略本次 refresh 消息');
-        return;
+        console.log('接口请求正在进行中，忽略本次 refresh 消息')
+        return
       }
 
-      this.isFetching = true; // 设置标志位为 true，表示接口请求正在进行中
+      this.isFetching = true // 设置标志位为 true，表示接口请求正在进行中
 
-      let ticketId;
+      let ticketId
       if (this.$route.query.ticketId) {
-        ticketId = this.$route.query.ticketId;
+        ticketId = this.$route.query.ticketId
       } else {
-        ticketId = localStorage.getItem('ticketId');
+        ticketId = localStorage.getItem('ticketId')
       }
 
       getJobPlayTicketInfo(ticketId).then((res) => {
-        console.log(res, '作业执行详细信息');
+        console.log(res, '作业执行详细信息')
         this.jobTicket = [res.data.jobTicket].map((item) => ({
           ...item,
           lockKeyName: res.data.lockKeyName,
           colockKeyName: res.data.colockKeyName
-        }));
-        this.lockUserList = res.data.lockUserList;
-        this.colockUserList = res.data.colockUserList;
-        this.ticketPointsList = res.data.ticketPointsList;
+        }))
+        this.lockUserList = res.data.lockUserList
+        this.colockUserList = res.data.colockUserList
+        this.ticketPointsList = res.data.ticketPointsList
       }).catch((error) => {
-        console.error('获取作业执行详细信息失败', error);
+        console.error('获取作业执行详细信息失败', error)
       }).finally(() => {
-        this.isFetching = false; // 重置标志位为 false，允许下次 refresh 消息执行接口请求
-      });
+        this.isFetching = false // 重置标志位为 false，允许下次 refresh 消息执行接口请求
+      })
     },
-    destory(){
-      closeWebsocket();//断开链接
+    destory() {
+      closeWebsocket()//断开链接
     },
     // 发消息
-    sendMsg(){
-      sendMsg('aaa');
-    },
+    sendMsg() {
+      sendMsg('aaa')
+    }
 
   }
 }
@@ -290,13 +313,31 @@ export default {
 
 
 <style scoped lang="scss">
-.message-list{
-  height: 500px;
-  width: 500px;
-  background: pink;
-  position: relative;
-  right: 0;
+.message-list {
+  height: 820px;
+  width: 570px;
+  background: white;
+  box-shadow: 2px 2px 5px 8px rgba(246, 246, 246, 0.6);
+  position: absolute;
+  right: 50px;
+  top: 0;
+  overflow: auto;
 }
+
+.message_title {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+  display: block;
+  background: white;
+  font-size: 18px;
+  font-weight: bolder;
+
+}
+
 .text {
   font-size: 14px;
 }
@@ -316,7 +357,7 @@ export default {
 }
 
 .box-card {
-  width: 1210px;
+  width: 1010px;
   margin: 15px;
 }
 
@@ -332,7 +373,7 @@ export default {
 }
 
 .box-card2 {
-  width: 780px;
+  width: 580px;
   margin: 15px;
 }