Merge pull request 'master' (#93) from master into test

Reviewed-on: http://git.feashow.cn/feashow/SmartOpsWeb/pulls/93
This commit is contained in:
springlog
2024-09-17 10:30:17 +00:00
4 changed files with 127 additions and 72 deletions

View File

@@ -3,6 +3,10 @@ const dialogVisible = ref(false);
const open = (row) => { const open = (row) => {
dialogVisible.value = true; dialogVisible.value = true;
}; };
// console.log(dialogVisible.value);
defineProps({
title:String
})
defineExpose({ defineExpose({
open, open,
}); });
@@ -10,7 +14,7 @@ defineExpose({
</script> </script>
<template> <template>
<el-dialog v-model="dialogVisible" title="语音详情" width="500" :before-close="handleClose"> <el-dialog v-model="dialogVisible" :title="title" width="500" >
<audio src="" controls style="width: 100%;"></audio> <audio src="" controls style="width: 100%;"></audio>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">

View File

@@ -6,7 +6,7 @@
</div> </div>
<div class="call-history"><h3 >历史通话记录</h3> <div class="call-history"><h3 >历史通话记录</h3>
<fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable> <fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
<voice ref="voiceRef" /> <voice ref="voiceRef" title="语音详情"/>
<infoLiveCall ref="infoLiveCallRef"/> <infoLiveCall ref="infoLiveCallRef"/>
</div> </div>
</div> </div>

View File

@@ -260,7 +260,7 @@ const headBtnClick = (key) => {
const handleDetail = (row) => { const handleDetail = (row) => {
// console.log(row); // console.log(row);
workDialogRef.value.open(row) workDialogRef.value.open()
rowData.value = row rowData.value = row
} }

View File

@@ -1,20 +1,23 @@
<script setup> <script setup>
import { nextTick, onMounted, reactive, ref, watch } from "vue"; import { nextTick, onMounted, reactive, ref, watch } from "vue";
import { ElMessageBox } from "element-plus"; import { ElMessageBox } from "element-plus";
import { MoreFilled } from "@element-plus/icons-vue"; import { MoreFilled, Check, Download ,VideoPlay} from "@element-plus/icons-vue";
import { time } from "echarts"; import { time } from "echarts";
import { defineExpose } from "vue"; import { defineExpose } from "vue";
import { defineProps } from "vue"; import { defineProps } from "vue";
import { orderGetDetails } from "@/api/order/order.js" import { orderGetDetails } from "@/api/order/order.js"
import Voice from '@/components/voice/index.vue'
//控制显示隐藏 //控制显示隐藏
const dialogVisible = ref(false); const dialogVisible = ref(false);
const props = defineProps({ const props = defineProps({
rowData: Object rowData: Object
}) })
let opsCallList = ref([]); let opsCallList = ref([]);
let orderData = ref([]); let orderData = ref([]);
let orderContent = ref([]); let orderContent = ref([]);
const voiceRef=ref()
const open = (row) => { const open = (row) => {
dialogVisible.value = true; dialogVisible.value = true;
}; };
@@ -22,29 +25,77 @@ const open = (row) => {
const getData = async () => { const getData = async () => {
// console.log(123); // console.log(123);
const data = await orderGetDetails(props.rowData.orderNumber) const data = await orderGetDetails(props.rowData.orderNumber)
// console.log("111", data); // console.log("111", data);
return data return data
} }
let contentState0 = [
let content = [
{ {
content: "待处理", content: "待处理",
timestamp: "orderData.value", timestamp: "orderData.value",
icon: Check,
color: "#0bbd87", color: "#0bbd87",
size: "large",
}, },
{ {
content: "已处理", content: "已处理",
timestamp: "2022-07-20 20:00", timestamp: "--",
type: "primary", type: "primary",
icon: MoreFilled, icon: MoreFilled,
size: "large", size: "large",
}, },
{ {
content: "结单", content: "结单",
timestamp: "2022-07-20 20:00", timestamp: "--",
size: "large", size: "large",
// icon: Check,
// color: "#0bbd87",
},
];
let contentState1 = [
{
content: "待处理",
timestamp: "orderData.value",
icon: Check,
color: "#0bbd87",
size: "large",
},
{
content: "已处理",
timestamp: "2022-07-20 20:00:00",
icon: Check,
color: "#0bbd87",
size: "large",
},
{
content: "结单",
timestamp: "--",
size: "large",
type: "primary",
icon: MoreFilled,
},
];
let contentState2 = [
{
content: "待处理",
timestamp: "orderData.value",
icon: Check,
color: "#0bbd87",
size: "large",
},
{
content: "已处理",
timestamp: "2022-07-20 20:00:00",
icon: Check,
color: "#0bbd87",
size: "large",
},
{
content: "结单",
timestamp: "2022-07-20 20:00:00",
size: "large",
icon: Check,
color: "#0bbd87",
}, },
]; ];
@@ -54,6 +105,7 @@ watch(() => props.rowData, (newRowData) => {
getData(newRowData).then((data) => { getData(newRowData).then((data) => {
opsCallList.value = [] opsCallList.value = []
orderData.value = data.data orderData.value = data.data
//电话拨打记录 //电话拨打记录
const dataDetails = data.data.opsCallList const dataDetails = data.data.opsCallList
// console.log(dataDetails); // console.log(dataDetails);
@@ -80,36 +132,28 @@ watch(() => props.rowData, (newRowData) => {
if (info.answeredTime !== null) { if (info.answeredTime !== null) {
// console.log(info.answeredTime); // console.log(info.answeredTime);
let startIndex = info.answeredTime.indexOf(' ') + 1; let startIndex = info.answeredTime.indexOf(' ') + 1;
let timeOnly = info.answeredTime.slice(startIndex, startIndex + 5); let timeOnly = info.answeredTime.slice(startIndex, startIndex + 8);
info.answeredTime = timeOnly.replace(':', ' : ') info.answeredTime = timeOnly.replace(/:/g, ':')
// info.answeredTime = timeOnly
} }
}) })
// console.log(item.data);
// item.data.sort((a, b) => a.answeredTime - b.answeredTime) // item.data.sort((a, b) => a.answeredTime - b.answeredTime)
opsCallList.value.push(item) opsCallList.value.push(item)
}) })
console.log(opsCallList.value);
//工单时间线 //工单时间线
orderContent.value = [] orderContent.value = []
// console.log(orderData.value); console.log(orderData.value);
content.map((item, index) => { // orderData.value.orderState='2'
if (index === 0) { if (orderData.value.orderState === '0') {
item.timestamp = orderData.value.operationTime || '--' inputOrderContent(contentState0)
} else if (index === 1) { }
item.timestamp = orderData.value.processedTime || '--' else if (orderData.value.orderState === '1') {
inputOrderContent(contentState1)
} else { }
item.timestamp = orderData.value.completionTime || '--' else if (orderData.value.orderState === '2') {
inputOrderContent(contentState2)
} }
})
content.forEach(item => {
orderContent.value.push(item)
})
// console.log(orderContent.value); // console.log(orderContent.value);
}) })
@@ -117,37 +161,31 @@ watch(() => props.rowData, (newRowData) => {
}, { }, {
immediate: true // 立即执行一次以便在rowData初始值非空时也能触发 immediate: true // 立即执行一次以便在rowData初始值非空时也能触发
}); });
// getData() const inputOrderTime = (item, index) => {
const test2 = [
{ {
if (index === 0) {
date: '2024-8-31', item.timestamp = orderData.value.operationTime || '--'
type: "primary", } else if (index === 1) {
icon: MoreFilled, // item.timestamp = orderData.value.processedTime || '--'
size: "large", } else {
}, { // item.timestamp = orderData.value.completionTime || '--'
content: "结单", }
size: "large",
} }
]; }
// const data = [
// { const inputOrderContent = (contentState) => {
// number: '17628661307', contentState.map((item, index) => {
// state: '通话中', inputOrderTime(item, index)
// time: '18 : 32', })
// }, contentState.forEach(item => {
// { orderContent.value.push(item)
// number: '17628661307', })
// state: '已接通', }
// time: '18 : 32',
// }, const openRecord = () => {
// { voiceRef.value.open(true)
// number: '17628661307', }
// state: '已接通',
// time: '18 : 32',
// }]
defineExpose({ defineExpose({
open, open,
}); });
@@ -178,11 +216,11 @@ defineExpose({
<el-main :style="{ position: 'static' }" class="main-content"> <el-main :style="{ position: 'static' }" class="main-content">
<div class="top"> <div class="top">
<div class="info"> <div class="info">
<span>创始人{{ rowData.createBy }}</span> <!-- <span>创始人{{ rowData.createBy }}</span> -->
<span>处理人{{ rowData.operationUser }}</span> <span>处理人{{ rowData.operationUser }}</span>
</div> </div>
<div class="info"> <div class="info">
<span>工单名称{{ rowData.siteName }}</span> <span>工单名称{{ rowData.orderName }}</span>
<span>关单人{{ rowData.knotter }}</span> <span>关单人{{ rowData.knotter }}</span>
</div> </div>
</div> </div>
@@ -196,7 +234,7 @@ defineExpose({
</div> </div>
</div> </div>
<div> <div>
<div>处理内容</div> <div>通话记录</div>
<div class="textBox"> <div class="textBox">
<el-scrollbar> <el-scrollbar>
<div class="text">{{ rowData.processedContent }}</div> <div class="text">{{ rowData.processedContent }}</div>
@@ -206,10 +244,17 @@ defineExpose({
</div> </div>
<div> <div>
<div>录音信息</div> <div>录音信息</div>
<div class="textBox"> <div class="textBox—record">
<el-scrollbar>
<div class="text">{{ rowData.recordUrl }}</div> <el-button @click="openRecord" type="primary" :icon="VideoPlay" style="margin-right: 10px ;">播放录音
</el-scrollbar> </el-button>
<voice ref="voiceRef" title="录音详情"/>
<a :href="opsCallList.recordUrl" download="record.mp3">
<el-button type="primary" :icon="Download">下载录音</el-button>
</a>
<!-- <el-scrollbar> -->
<!-- <div class="text">{{ rowData.recordUrl }}</div> -->
<!-- </el-scrollbar> -->
</div> </div>
</div> </div>
@@ -234,7 +279,7 @@ defineExpose({
color: info.callState === '通话中' ? '#6cc23a' : '#409eff' color: info.callState === '通话中' ? '#6cc23a' : '#409eff'
}">{{ info.callState }}</span> --> }">{{ info.callState }}</span> -->
<span class="span-3th" :style="{ color: '#a8abb2' }">{{ <span class="span-3th" :style="{ color: '#a8abb2' }">{{
info.answeredTime || '00 : 00' }}</span> info.answeredTime || '00:00:00' }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -298,13 +343,19 @@ defineExpose({
padding: 15px; padding: 15px;
} }
.main-content .body .textBoxrecord {
width: 100%;
min-height: 10vh;
// max-height: 15vh;
// border: 1.5px solid #e4e7ed;
// box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
// margin-bottom: 20px;
padding: 15px;
}
.main-content .body .text { .main-content .body .text {
resize: none; resize: none;
// overflow-y: auto; // overflow-y: auto;
font-size: 16px; font-size: 16px;
line-height: 25px line-height: 25px
} }