添加呼叫修改布局

src/components/common/consultation.vue

  <template>
-  <div class="consultationlist" style=" user-select:none; ">
+  <div class="consultationlist" style="user-select: none">
     <div class="list">
-      <div class="name">{{ operatorsItem.name || ''}}</div>
+      <div class="name">{{ operatorsItem.name || "" }}</div>
       <div class="details" @click="goworkBench">
-        <div class="handle">待处理: <span> 暂无</span></div>
+        <!-- <div class="handle">待处理: <span> 暂无</span></div> -->
         <div class="see">
-          <a href="#">查看详情</a>
+          <span>查看详情</span>
           <i class="el-icon-arrow-right"></i>
         </div>
       </div>
@@ -34,20 +34,20 @@
 <script>
 export default {
   data() {
-    return {
-    }
+    return {};
   },
-  props:{
-    operatorsItem:{
+  props: {
+    operatorsItem: {
       type: Object,
-      default:{}
+      default: {},
     },
     workbenchAdminDate: {
       type: String,
-      default:''
-    }
+      default: "",
+    },
   },
   created() {
+    console.log("operatorsItem", this.operatorsItem);
   },
   methods: {
     goworkBench() {
@@ -56,24 +56,23 @@ export default {
         operateUserId: this.operatorsItem.id,
         pageNo: 1,
         pageSize: 6,
-        returnStatus: 1
+        returnStatus: 1,
       };
-       this.$store.commit("clearRawCurrentCalList")
-      this.POST('/diagnose/socket/condition/update', p).then(res=>{
-         if(res.code == '000000'){
-
-           this.$store.commit('updateSoketQuest', p)
-           this.$router.push({path:'/workbench'})
-         }else{
-           this.$message({
-             message: res.message,
-             type: "warning",
-             duration:1000
-           });
-         }
-       })
-    }
-  }
+      this.$store.commit("clearRawCurrentCalList");
+      this.POST("/diagnose/socket/condition/update", p).then((res) => {
+        if (res.code == "000000") {
+          this.$store.commit("updateSoketQuest", p);
+          this.$router.push({ path: "/workbench" });
+        } else {
+          this.$message({
+            message: res.message,
+            type: "warning",
+            duration: 1000,
+          });
+        }
+      });
+    },
+  },
 };
 </script>
 
@@ -81,14 +80,13 @@ export default {
 .consultationlist {
   padding: 25px;
   width: 100%;
-
   background: #ffffff;
   border-radius: 18px;
   .list {
     display: flex;
     justify-content: space-between;
     .details {
-      width: 192px;
+      width: 120px;
       height: 40px;
       background: rgba(68, 146, 132, 0.24);
       border-radius: 20px;
@@ -96,30 +94,30 @@ export default {
       border: 1px solid #449284;
       display: flex;
       justify-content: space-evenly;
-       align-items: center;
-       cursor: pointer;
+      align-items: center;
+      cursor: pointer;
       .handle {
         font-size: 14px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #6a7990;
         line-height: 18px;
-        span{
-            font-size: 18px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #449284;
+        span {
+          font-size: 18px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #449284;
         }
       }
       .see {
-      a{
-      font-size: 14px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #6a7990;
+        span {
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #6a7990;
+        }
       }
     }
-    }
     .name {
       font-size: 24px;
       font-family: PingFangSC-Medium, PingFang SC;
@@ -127,22 +125,22 @@ export default {
       color: #063948;
     }
   }
-  .data{
-      margin-top: 20px;
-      display: flex;
-      justify-content: space-between;
-    .totallist{
-        font-size: 18px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #063948;
-        line-height: 25px;
+  .data {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    .totallist {
+      font-size: 18px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #063948;
+      line-height: 25px;
     }
-    .statelist{
-        font-size: 14px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #6A7990;
+    .statelist {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #6a7990;
     }
   }
 }

src/components/common/inquirylist.vue

@@ -11,7 +11,8 @@
           {{ diagnoseType }}
         </div>
         <div class="time">
-          <i class="appointment"></i><span>{{ appointBeginTime }}</span>-<span>{{ appointEndTime }}</span>
+          <i class="appointment"></i><span>{{ appointBeginTime }}</span
+          >-<span>{{ appointEndTime }}</span>
         </div>
       </div>
       <div class="right">
@@ -51,16 +52,21 @@
             </div>
           </div>
           <div class="call-status">
-            <img v-if="isCall" @click="drivingCall" :src="callout" alt="" />
+            <img
+              v-if="isCall"
+              @click="drivingCall(item.doctorId, 2)"
+              :src="isDoctorChat ? callouting : callout"
+              alt=""
+            />
           </div>
         </div>
         <div class="line-btn" @click="openChat">
-          <span v-if="isChat">正在呼叫医助，进入诊室</span>
+          <span v-if="isDoctorChat">正在呼叫接诊医生，进入诊室</span>
+          <span v-else-if="isUserChat">正在呼叫医助，进入诊室</span>
           <span v-else>进入诊室</span>
         </div>
       </div>
       <div class="inquiry-user-container">
-
         <div class="inquiry-user">
           <div class="inquiry-user-img">
             <div class="avatar">
@@ -87,7 +93,12 @@
             </div>
           </div>
           <div class="call-status">
-            <img v-if="isCall" @click="drivingCall" :src="callout" alt="" />
+            <img
+              v-if="isCall"
+              @click="drivingCall(item.userId, 1)"
+              :src="isUserChat ? callouting : callout"
+              alt=""
+            />
           </div>
         </div>
 
@@ -113,9 +124,12 @@ export default {
       infocallImg: require("@/assets/image/workbench/calling.png"),
       callout: require("@/assets/image/workbench/callout.png"),
       callouting: require("@/assets/image/workbench/callouting.png"),
-      timer:null,
-      isChat:false,
-      isCall:false
+      timer: null,
+      isChat: false,
+      isUserChat: false,
+      isDoctorChat: false,
+      isCall: false,
+      accId: "",
     };
   },
   props: {
@@ -126,17 +140,15 @@ export default {
   },
   created() {},
   mounted() {
-    console.log("this.item",this.item)
-     let nowData = new Date().getTime()
-      let timeleft= this.item.appointBeginTime-nowData
-      if(timeleft<120000&&nowData<this.item.appointEndTime){
-         clearInterval(this.timer);
-        this.down();
-      }
-      else{
-        this.isCall=true
-      }
-
+    console.log("this.item", this.item);
+    let nowData = new Date().getTime();
+    let timeleft = this.item.appointBeginTime - nowData;
+    if (timeleft < 120000 && nowData < this.item.appointEndTime) {
+      clearInterval(this.timer);
+      this.down();
+    } else {
+      this.isCall = true;
+    }
 
     // if (this.appointBeginTime > 0) {
     //   this.time=this.timeleft
@@ -201,43 +213,64 @@ export default {
     doctorCallTime() {
       return new Date(this.item.doctorCallTime).format("hh:mm");
     },
-    nowtime(){
-      return new Date().getTime()-this.item.appointBeginTime
-    }
-
+    nowtime() {
+      return new Date().getTime() - this.item.appointBeginTime;
+    },
   },
   methods: {
     down() {
       this.timer = setInterval(() => {
-        let nowData = new Date().getTime()
+        let nowData = new Date().getTime();
 
-        let timeleft= this.item.appointBeginTime-nowData
-        if(timeleft<120000&&nowData<this.item.appointEndTime){
-          this.isCall=true
+        let timeleft = this.item.appointBeginTime - nowData;
+        if (timeleft < 120000 && nowData < this.item.appointEndTime) {
+          this.isCall = true;
           clearInterval(this.timer);
         }
       }, 1000);
     },
-
-    drivingCall() {
-      let url = `/im/team/call/direct/`;
-      let params = {
-        imAccId: data.accId,
-        imTeamId: this.item.imTeamId,
-        liveRoomId: this.item.roomId
-      };
-      this.POST(url, params).then((res) => {
-        if (res.code === "000000") {
-          this.$message({
-            message: '呼叫成功',
-            type: "success",
-          });
-        } else {
-          this.$message({
-            message: res.message,
-            type: "warning",
-          });
-        }
+    getInfo(id) {
+      let url = `/im/team/detail?tid=${this.item.imTeamId}`;
+      return this.GET(url)
+        .then((res) => {
+          if (res.code == "000000") {
+            let { memberList } = res.data;
+            console.log("---memberList", memberList);
+            if (memberList) {
+              let accId = memberList.filter((val) => {
+                return val.id == id;
+              });
+              return accId[0].accId;
+            }
+          }
+        })
+        .catch(() => {});
+    },
+    // 主动呼叫 roletype 1：助诊医生 2：接诊医生
+    drivingCall(id, roletype) {
+      this.getInfo(id).then((res) => {
+        console.log(res)
+        let url = `/im/team/call/direct/`;
+        let params = {
+          imAccId: res,
+          imTeamId: this.item.imTeamId,
+          liveRoomId: this.item.roomId,
+        };
+        this.POST(url, params).then((res) => {
+          if (res.code === "000000") {
+            if (roletype == 1) {
+              this.isUserChat = true;
+            } else {
+              console.log("ererer")
+              this.isDoctorChat = true;
+            }
+          } else {
+            this.$message({
+              message: res.message,
+              type: "warning",
+            });
+          }
+        });
       });
     },
     openChat() {
@@ -345,66 +378,66 @@ export default {
         color: #ff5e57;
       }
     }
-    .inquiry-user-container{
+    .inquiry-user-container {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       .inquiry-user {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 20px;
-      .inquiry-user-img {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        .avatar {
-          background: #dddddd;
-          border-radius: 36px;
+        justify-content: space-between;
+        margin-bottom: 20px;
+        .inquiry-user-img {
           display: flex;
           flex-direction: column;
           justify-content: center;
+          .avatar {
+            background: #dddddd;
+            border-radius: 36px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+          }
         }
-      }
-      .inquiry-user-info {
-        font-size: 14px;
-        margin-left: 10px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-right: 10px;
-        .info-name {
-          font-size: 18px;
-          color: #02120f;
-          font-weight: bold;
-        }
-        .info-phone {
-          color: #6a7990;
-          font-size: 16px;
-        }
-        .info-call-time {
-          color: #ff5e57;
-        }
-        .info-calling {
-          width: 15px;
-          height: 15px;
-          display: inline-block;
-          img {
-            width: 100%;
+        .inquiry-user-info {
+          font-size: 14px;
+          margin-left: 10px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          margin-right: 10px;
+          .info-name {
+            font-size: 18px;
+            color: #02120f;
+            font-weight: bold;
+          }
+          .info-phone {
+            color: #6a7990;
+            font-size: 16px;
+          }
+          .info-call-time {
+            color: #ff5e57;
+          }
+          .info-calling {
+            width: 15px;
+            height: 15px;
+            display: inline-block;
+            img {
+              width: 100%;
+            }
           }
         }
-      }
-      .call-status {
-        width: 45px;
-        height: 46px;
-        cursor: pointer;
-        img {
+        .call-status {
           width: 45px;
           height: 46px;
+          cursor: pointer;
+          img {
+            width: 45px;
+            height: 46px;
+          }
         }
       }
     }
-    }
 
     .line-btn {
       cursor: pointer;
@@ -431,8 +464,8 @@ export default {
         color: #ffffff;
         line-height: 20px;
       }
-      span{
-         font-weight: bold;
+      span {
+        font-weight: bold;
       }
     }
   }

src/views/IM/diagnosis-admin/administrators.vue

@@ -130,16 +130,18 @@ export default {
     width: 100%;
     padding: 20px;
     .consultation-content {
-       display: flex;
-      flex-wrap: wrap;
-
-      justify-content: space-between;
-
+      display: grid;
+      grid-template-columns: 33.3% 33.3% 33.3%;
+      grid-row-gap: 20px;
+      // grid-column-gap: 20px;
       overflow: hidden;
       .consultation-li {
-        min-width: 488px;
-        width: 49%;
-        margin-bottom: 20px;
+        width: 90%;
+        margin: 0 auto;
+        display: flex;
+        justify-content: center;
+
+
       }
     }
   }

src/views/IM/diagnosis-admin/workbench.vue

@@ -176,6 +176,8 @@ export default {
       s.dateTime = val.format("yyyy-MM-dd");
       this.searchParam = s;
     },
+
+
     search() {
       this.inquirySearch("clear");
     },
@@ -328,6 +330,7 @@ export default {
       justify-content: flex-end;
       align-items: center;
       margin-top: 10px;
+      padding: 0 20px;
     }
   }
 }