<template>
<div class="OnDutyToday">
<div class="tabList">
<div
class="tab"
v-for="item in tabList"
:key="item.index"
::key="item.index"
:class="item.index == currenIndex ? 'active' : ''"
@click="changeTab(item)"
>
{{ item.lable }}
</div>
</div>
<div class="ryBox">
<div class="searchDiv" style="margin: 20px 10px 0 20px">
<!-- <el-select v-model="searchValue" filterable placeholder="请选择" size="small" @change="selectType">
<el-option
v-for="item in listStaff"
:key="item.id"
:label="item.dictKey"
:value="item.dictValue"
>
</el-option>
</el-select>
<el-button style="margin-left: 20px "
type="primary"
size="small"
icon="search"
@click="handleClick()"
>搜索
</el-button> -->
<el-tabs v-model="searchValue" @tab-click="tabsClick">
<el-tab-pane
v-for="item in listStaff"
:key="item.id"
:label="item.dictKey"
:name="item.dictValue"
></el-tab-pane>
</el-tabs>
</div>
<div class="flex-1 dutyinfo">
<div
class="formbox"
v-if="assigninfo.dutyDeptList && assigninfo.dutyDeptList.length > 0"
>
<div
class="formcustom"
v-for="item in assigninfo.dutyDeptList"
:key="item.dutyDeptId"
>
<div class="formhead">
<i class="el-icon-user-solid"></i>{{ item.dutyDeptName }}
</div>
<div
class="formitem"
v-for="j in item.dutyShiftList"
:key="j.dutyShiftId"
>
<div class="itemflex">
<span
:class="
j.dutyShiftName == '带班领导'
? 'formspan1'
: j.dutyShiftName == '泵站早班'
? 'formspan2'
: j.dutyShiftName == '泵站晚班'
? 'formspan3'
: 'formspan4'
"
>{{ j.dutyShiftName }}</span
>
</div>
<div
style="
min-width: 135px;
color: #478af4;
font-weight: 500;
padding-right: 10px;
"
class="formspan"
>
{{ j.dutyShiftStartTime }}--{{ j.dutyShiftEndTime }}
</div>
<div class="rightText">
<div
v-for="g in j.dutyUserList"
:key="g.dutyUserId"
class=""
style="padding-right: 10px; margin-bottom: 10px"
>
<div class="Namespan">{{ g.dutyUserName }} </div>
<div class="Phonespan">
{{ g.dutyUserPhone }}
<div
v-if="g.dutyUserPhone"
class="el-icon-phone"
@click="CallRongyun(g)"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else class="noData">暂无值班安排</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";
import store from "@/store";
import { getTodayDutyUser } from "@/api/duty/loggingDesk";
import { getYwDictList } from "@/api/base/dict";
import { getUserStatus } from "@/api/rongyun/rongyunApi.js";
export default {
components: {},
props: {},
data() {
return {
currenIndex: 0,
dayTimeshow: "",
assigninfo: "",
tabList: [
{
lable: "今日值班人员",
index: 0,
},
],
listStaff: [],
searchValue: "",
};
},
watch: {},
computed: {},
created() {
this.dayTimeshow = this.moment().format("YYYY-MM-DD");
},
mounted() {
this.getzidian();
},
methods: {
tabsClick(e) {
console.log(e);
this.gettodayDuty();
},
//拨打融云
CallRongyun(item) {
let parmas = {
phone: item.dutyUserPhone,
userName: item.dutyUserName,
// phone:'13349847002',
// userName:'刘源野',
type: 1,
};
// this.bus.$emit("OffRongYun", parmas);
this.rongYunCall(parmas);
},
async rongYunCall(item) {
let formData1 = new FormData();
formData1.append("userID", store.getters.userInfo.phone);
let res1 = await getUserStatus(formData1);
let flag1 = null;
if (res1.data.code == 200) {
let data = JSON.parse(res1.data.data);
flag1 = data.status;
}
if (flag1 != 1) {
this.$confirm(
`${store.getters.userInfo.user_name}用户视频会商不在线，是否重新连接?, "提示"`,
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
this.bus.$emit("rystatus");
this.getCallStatus(item);
})
.catch(() => {});
} else {
this.getCallStatus(item);
}
},
async getCallStatus(item) {
let formData = new FormData();
formData.append("userID", item.phone);
formData.append("userName", item.userName);
let res = await getUserStatus(formData);
let flag = null;
if (res.data.code == 200) {
let data = JSON.parse(res.data.data);
flag = data.status;
}
if (flag != 1) {
return this.$message.warning(`${item.userName}用户视频会商不在线!`);
} else {
this.bus.$emit("OffRongYun", { ...item, type: 1 });
}
},
selectType(e) {
console.log("e", e);
this.gettodayDuty();
},
handleClick() {
this.gettodayDuty();
},
getzidian() {
getYwDictList("duty_dept_type").then((res) => {
console.log("res", res);
if (res.data.code == 200) {
this.listStaff = res.data.data;
this.searchValue = res.data.data[0].dictValue;
this.gettodayDuty();
}
});
},
gettodayDuty() {
this.loading = true;
let params = {
date: this.dayTimeshow,
dutyDeptType: this.searchValue,
};
getTodayDutyUser(params).then(
(res) => {
console.log(res);
this.loading = false;
if (res.data.code == 200) {
this.assigninfo = res.data.data;
}
},
(error) => {
this.loading = false;
console.log(error);
}
);
},
changeTab(item) {
this.currenIndex = item.index;
},
},
};
</script>
<style lang="scss" scoped>
.OnDutyToday {
padding-top: 20px;
.tabList {
display: flex;
width: 100%;
height: 40px;
justify-content: center;
align-items: center;
// position: absolute;
// top: 30px;
// left: 0;
.tab {
width: 100px;
color: #68b2d8;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
cursor: pointer;
&:after {
content: "/";
margin-left: 20px;
color: #0e3760;
}
&:last-child {
&::after {
content: "";
}
}
&.active {
color: #f76402;
}
}
}
.ryBox {
width: 100%;
height: 460px;
overflow: hidden;
padding: 10px;
position: relative;
:deep(.el-tabs__item) {
color: #fff;
font-size: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
background: #dfd7d73b;
}
:deep(.el-tabs__item.is-active) {
color: #409eff;
}
}
.dutyinfo {
padding-left: 10px;
.formbox {
height: 370px;
padding: 10px;
overflow-y: auto;
.rightText {
display: flex;
// justify-content: space-between;
align-items: center;
flex-wrap: wrap;
// overflow-x: auto;
}
.formcustom {
// background: #fbfbfb;
border: 1px solid #4086a7;
border-radius: 2px;
&:not(:last-child) {
margin-bottom: 20px;
}
.formhead {
line-height: 36px;
font-size: 14px;
color: #54a5ff;
padding: 0 5px;
// font-family: YouSheBiaoTiHei;
// border-bottom: 1px solid #eaeaea;
background: linear-gradient(
90deg,
rgba(51, 114, 246, 0) 0%,
rgba(51, 114, 246, 0.2) 50%,
rgba(51, 114, 246, 0) 100%
);
border-radius: 2px 2px 0px 0px;
}
.itemflex {
display: flex;
justify-content: center;
align-items: center;
min-width: 120px;
}
.formitem {
display: flex;
font-size: 16px;
align-items: center;
padding: 10px 0px;
color: #fff;
div {
text-align: center;
line-height: 24px;
}
.formspan1 {
background: linear-gradient(0deg, #d4a262 0%, #f2d7b5 100%);
border-radius: 2px;
color: #333333;
padding: 5px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: bold;
}
.formspan2 {
background: #f88b43;
border-radius: 2px;
padding: 5px;
font-size: 14px;
color: #ffffff;
}
.formspan3 {
background: #4287f9;
border-radius: 2px;
padding: 5px;
font-size: 14px;
color: #ffffff;
}
.formspan4 {
background: #31d2ae;
border-radius: 2px;
padding: 5px;
font-size: 14px;
color: #ffffff;
}
}
.Namespan {
font-size: 14px;
font-family: Source Han Sans CN;
}
.Phonespan {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 500;
}
.el-icon-phone {
cursor: pointer;
color: #51c979;
}
}
}
.personnel {
margin-top: 10px;
.tableText {
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 10px;
background: #daf2fd;
position: relative;
.tableTextBef {
position: absolute;
left: 0;
top: -1px;
width: 4px;
height: 32px;
background: #02a7f0;
}
}
.infostaff {
padding: 10px;
font-size: 18px;
}
}
.noData {
height: 100px;
}
}
}
</style>
