Merge pull request 'master' (#180) from master into test
Reviewed-on: http://git.feashow.cn/feashow/SmartOpsWeb/pulls/180
This commit is contained in:
@@ -1,17 +1,17 @@
|
|||||||
<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, Check, Download, VideoPlay } 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'
|
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([]);
|
||||||
@@ -20,428 +20,434 @@ let orderContent = ref([]);
|
|||||||
const voiceRef = ref()
|
const voiceRef = ref()
|
||||||
const rowUrl = ref()
|
const rowUrl = ref()
|
||||||
const open = (row) => {
|
const open = (row) => {
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
// console.log(123);
|
// console.log(123);
|
||||||
const data = await orderGetDetails({
|
const data = await orderGetDetails({
|
||||||
orderNumber:props.rowData.orderNumber,
|
orderNumber: props.rowData.orderNumber,
|
||||||
alarmObject :props.rowData.alarmObject,
|
alarmObject: props.rowData.alarmObject,
|
||||||
alarmUnit :props.rowData.alarmUnit
|
alarmUnit: props.rowData.alarmUnit
|
||||||
})
|
})
|
||||||
// console.log("111", data);
|
// console.log("111", data);
|
||||||
return data
|
return data
|
||||||
|
|
||||||
}
|
}
|
||||||
let contentState0 = [
|
let contentState0 = [
|
||||||
{
|
{
|
||||||
content: "待处理",
|
content: "待处理",
|
||||||
timestamp: "orderData.value",
|
timestamp: "orderData.value",
|
||||||
icon: Check,
|
icon: Check,
|
||||||
color: "#0bbd87",
|
color: "#0bbd87",
|
||||||
size: "large",
|
size: "large",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
content: "已处理",
|
content: "已处理",
|
||||||
timestamp: "--",
|
timestamp: "--",
|
||||||
type: "primary",
|
type: "primary",
|
||||||
icon: MoreFilled,
|
icon: MoreFilled,
|
||||||
size: "large",
|
size: "large",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
content: "结单",
|
content: "结单",
|
||||||
timestamp: "--",
|
timestamp: "--",
|
||||||
size: "large",
|
size: "large",
|
||||||
// icon: Check,
|
// icon: Check,
|
||||||
// color: "#0bbd87",
|
// color: "#0bbd87",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
let contentState1 = [
|
let contentState1 = [
|
||||||
{
|
{
|
||||||
content: "待处理",
|
content: "待处理",
|
||||||
timestamp: "orderData.value",
|
timestamp: "orderData.value",
|
||||||
icon: Check,
|
icon: Check,
|
||||||
color: "#0bbd87",
|
color: "#0bbd87",
|
||||||
size: "large",
|
size: "large",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
content: "已处理",
|
content: "已处理",
|
||||||
timestamp: "2022-07-20 20:00:00",
|
timestamp: "2022-07-20 20:00:00",
|
||||||
icon: Check,
|
icon: Check,
|
||||||
color: "#0bbd87",
|
color: "#0bbd87",
|
||||||
size: "large",
|
size: "large",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
content: "结单",
|
content: "结单",
|
||||||
timestamp: "--",
|
timestamp: "--",
|
||||||
size: "large",
|
size: "large",
|
||||||
type: "primary",
|
type: "primary",
|
||||||
icon: MoreFilled,
|
icon: MoreFilled,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
let contentState2 = [
|
let contentState2 = [
|
||||||
{
|
{
|
||||||
content: "待处理",
|
content: "待处理",
|
||||||
timestamp: "orderData.value",
|
timestamp: "orderData.value",
|
||||||
icon: Check,
|
icon: Check,
|
||||||
color: "#0bbd87",
|
color: "#0bbd87",
|
||||||
size: "large",
|
size: "large",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
content: "已处理",
|
content: "已处理",
|
||||||
timestamp: "2022-07-20 20:00:00",
|
timestamp: "2022-07-20 20:00:00",
|
||||||
icon: Check,
|
icon: Check,
|
||||||
color: "#0bbd87",
|
color: "#0bbd87",
|
||||||
size: "large",
|
size: "large",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
content: "结单",
|
content: "结单",
|
||||||
timestamp: "2022-07-20 20:00:00",
|
timestamp: "2022-07-20 20:00:00",
|
||||||
size: "large",
|
size: "large",
|
||||||
icon: Check,
|
icon: Check,
|
||||||
color: "#0bbd87",
|
color: "#0bbd87",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
watch(() => props.rowData, (newRowData) => {
|
watch(() => props.rowData, (newRowData) => {
|
||||||
if (newRowData) {
|
if (newRowData) {
|
||||||
// console.log(getData(newRowData));
|
// console.log(getData(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);
|
||||||
const theData = [{ createTime: '', data: [] }]
|
const theData = [{createTime: '', data: []}]
|
||||||
|
|
||||||
dataDetails.forEach(for1data => {
|
|
||||||
// console.log(for1data.createTime, '--------');
|
|
||||||
for (let i = 0; i < theData.length; i++) {
|
|
||||||
// console.log(theData[i]);
|
|
||||||
if (theData[i].createTime === for1data.createTime) {
|
|
||||||
theData[i].data.push(for1data)
|
|
||||||
break;
|
|
||||||
} else if (theData[i].createTime === '') {
|
|
||||||
theData[i].createTime = for1data.createTime
|
|
||||||
theData[i].data.push(for1data)
|
|
||||||
} else {
|
|
||||||
theData.push({ createTime: '', data: [] })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// theData.pop()
|
|
||||||
// theData[0].data.sort((a, b) => b.answer_time- a.answer_time)
|
|
||||||
// console.log(theData);
|
|
||||||
theData.forEach(item => {
|
|
||||||
item.data.forEach(info => {
|
|
||||||
if (info.answeredTime !== null) {
|
|
||||||
// console.log(info.answeredTime);
|
|
||||||
let startIndex = info.answeredTime.indexOf(' ') + 1;
|
|
||||||
let timeOnly = info.answeredTime.slice(startIndex, startIndex + 8);
|
|
||||||
info.answeredTime = timeOnly.replace(/:/g, ':')
|
|
||||||
// info.answeredTime = timeOnly
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// item.data.sort((a, b) => a.answeredTime - b.answeredTime)
|
|
||||||
opsCallList.value.push(item)
|
|
||||||
})
|
|
||||||
|
|
||||||
//工单时间线
|
|
||||||
orderContent.value = []
|
|
||||||
// console.log(orderData.value);
|
|
||||||
// orderData.value.orderState='2'
|
|
||||||
if (orderData.value.orderState === '0') {
|
|
||||||
inputOrderContent(contentState0)
|
|
||||||
}
|
|
||||||
else if (orderData.value.orderState === '1') {
|
|
||||||
inputOrderContent(contentState1)
|
|
||||||
}
|
|
||||||
else if (orderData.value.orderState === '2') {
|
|
||||||
inputOrderContent(contentState2)
|
|
||||||
}
|
|
||||||
// console.log(orderContent.value);
|
|
||||||
|
|
||||||
|
dataDetails?.forEach(for1data => {
|
||||||
|
// console.log(for1data.createTime, '--------');
|
||||||
|
for (let i = 0; i < theData.length; i++) {
|
||||||
|
// console.log(theData[i]);
|
||||||
|
if (theData[i].createTime === for1data.createTime) {
|
||||||
|
theData[i].data.push(for1data)
|
||||||
|
break;
|
||||||
|
} else if (theData[i].createTime === '') {
|
||||||
|
theData[i].createTime = for1data.createTime
|
||||||
|
theData[i].data.push(for1data)
|
||||||
|
} else {
|
||||||
|
theData.push({createTime: '', data: []})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// theData.pop()
|
||||||
|
// theData[0].data.sort((a, b) => b.answer_time- a.answer_time)
|
||||||
|
// console.log(theData);
|
||||||
|
theData.forEach(item => {
|
||||||
|
item.data.forEach(info => {
|
||||||
|
if (info.answeredTime !== null) {
|
||||||
|
// console.log(info.answeredTime);
|
||||||
|
let startIndex = info.answeredTime.indexOf(' ') + 1;
|
||||||
|
let timeOnly = info.answeredTime.slice(startIndex, startIndex + 8);
|
||||||
|
info.answeredTime = timeOnly.replace(/:/g, ':')
|
||||||
|
// info.answeredTime = timeOnly
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
// item.data.sort((a, b) => a.answeredTime - b.answeredTime)
|
||||||
|
opsCallList.value.push(item)
|
||||||
|
})
|
||||||
|
|
||||||
|
//工单时间线
|
||||||
|
orderContent.value = []
|
||||||
|
console.log(orderData.value);
|
||||||
|
// orderData.value.orderState='2'
|
||||||
|
if (orderData.value.orderState === '0') {
|
||||||
|
inputOrderContent(contentState0)
|
||||||
|
} else if (orderData.value.orderState === '1') {
|
||||||
|
inputOrderContent(contentState1)
|
||||||
|
} else if (orderData.value.orderState === '2') {
|
||||||
|
inputOrderContent(contentState2)
|
||||||
|
}
|
||||||
|
// console.log(orderContent.value);
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
}, {
|
}, {
|
||||||
immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
|
immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
|
||||||
});
|
});
|
||||||
const inputOrderTime = (item, index) => {
|
const inputOrderTime = (item, index) => {
|
||||||
{
|
{
|
||||||
if (index === 0) {
|
if (index === 0) {
|
||||||
item.timestamp = orderData.value.operationTime || '--'
|
item.timestamp = orderData.value.operationTime || '--'
|
||||||
} else if (index === 1) {
|
} else if (index === 1) {
|
||||||
// item.timestamp = orderData.value.processedTime || '--'
|
// item.timestamp = orderData.value.processedTime || '--'
|
||||||
} else {
|
} else {
|
||||||
// item.timestamp = orderData.value.completionTime || '--'
|
// item.timestamp = orderData.value.completionTime || '--'
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const inputOrderContent = (contentState) => {
|
const inputOrderContent = (contentState) => {
|
||||||
contentState.map((item, index) => {
|
contentState.map((item, index) => {
|
||||||
inputOrderTime(item, index)
|
inputOrderTime(item, index)
|
||||||
})
|
})
|
||||||
contentState.forEach(item => {
|
contentState.forEach(item => {
|
||||||
orderContent.value.push(item)
|
orderContent.value.push(item)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const openRecord = () => {
|
const openRecord = () => {
|
||||||
if ( props.rowData.recordUrl !== null) {
|
if (props.rowData.recordUrl !== null) {
|
||||||
voiceRef.value.open(true)
|
voiceRef.value.open(true)
|
||||||
rowUrl.value = props.rowData.recordUrl
|
rowUrl.value = props.rowData.recordUrl
|
||||||
} else {
|
} else {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: '暂无语音',
|
message: '暂无语音',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const downloadRecord = () => {
|
const downloadRecord = () => {
|
||||||
if(props.rowData.recordUrl === null){
|
if (props.rowData.recordUrl === null) {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: '暂无语音',
|
message: '暂无语音',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
defineExpose({
|
defineExpose({
|
||||||
open,
|
open,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-dialog v-model="dialogVisible" :show-close=true title="工单详情" width="80%">
|
<el-dialog v-model="dialogVisible" :show-close=true title="工单详情" width="80%">
|
||||||
<div class="common-layout">
|
<div class="common-layout">
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header class="header"><span>工单号：</span>
|
<el-header class="header"><span>工单号：</span>
|
||||||
<span>{{ rowData.orderNumber || '--' }}</span>
|
<span>{{ rowData.orderNumber || '--' }}</span>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-container class="main-container">
|
<el-container class="main-container">
|
||||||
<el-aside width="200px" :style="{ position: 'static' }">
|
<el-aside width="200px" :style="{ position: 'static' }">
|
||||||
<div class="aside-content">
|
<div class="aside-content">
|
||||||
<el-timeline style="max-width: 600px">
|
<el-timeline style="max-width: 600px">
|
||||||
<el-timeline-item v-for="(activity, index) in orderContent" :key="index"
|
<el-timeline-item v-for="(activity, index) in orderContent" :key="index"
|
||||||
:icon="activity.icon" :type="activity.type" :color="activity.color"
|
:icon="activity.icon" :type="activity.type" :color="activity.color"
|
||||||
:size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp">
|
:size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp">
|
||||||
<p style="font-size: 17px;"> {{ activity.content }}</p>
|
<p style="font-size: 17px;"> {{ activity.content }}</p>
|
||||||
</el-timeline-item>
|
</el-timeline-item>
|
||||||
</el-timeline>
|
</el-timeline>
|
||||||
</div>
|
</div>
|
||||||
</el-aside>
|
</el-aside>
|
||||||
<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.orderName || '--' }}</span>
|
<span>工单名称：{{ rowData.orderName || '--' }}</span>
|
||||||
<span>关单人：{{ rowData.knotter || '--' }}</span>
|
<span>关单人：{{ rowData.knotter || '--' }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<div>
|
<div>
|
||||||
<div>工单内容：</div>
|
<div>工单内容：</div>
|
||||||
<div class="textBox">
|
<div class="textBox">
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<div class="text">{{ rowData.orderContent || '暂无工单内容' }}</div>
|
<div class="text">{{ rowData.orderContent || '暂无工单内容' }}</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</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>-->
|
||||||
<!-- </el-scrollbar>-->
|
<!-- </el-scrollbar>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
|
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<div>
|
<div>
|
||||||
<div>录音信息：</div>
|
<div>录音信息：</div>
|
||||||
<div class="textBox—record">
|
<div class="textBox—record">
|
||||||
|
|
||||||
<el-button @click="openRecord" type="primary" :icon="VideoPlay"
|
<el-button @click="openRecord" type="primary" :icon="VideoPlay"
|
||||||
style="margin-right: 10px ;">播放录音
|
style="margin-right: 10px ;">播放录音
|
||||||
</el-button>
|
</el-button>
|
||||||
<voice ref="voiceRef" title="录音详情" :rowUrl="rowUrl" />
|
<voice ref="voiceRef" title="录音详情" :rowUrl="rowUrl"/>
|
||||||
<a :href=rowData.recordUrl download>
|
<a :href=rowData.recordUrl download>
|
||||||
<el-button type="primary" :icon="Download"
|
<el-button type="primary" :icon="Download"
|
||||||
@click="downloadRecord">下载录音</el-button>
|
@click="downloadRecord">下载录音
|
||||||
</a>
|
</el-button>
|
||||||
<!-- <el-scrollbar> -->
|
</a>
|
||||||
<!-- <div class="text">{{ rowData.recordUrl }}</div> -->
|
<!-- <el-scrollbar> -->
|
||||||
<!-- </el-scrollbar> -->
|
<!-- <div class="text">{{ rowData.recordUrl }}</div> -->
|
||||||
</div>
|
<!-- </el-scrollbar> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div>电话拨打记录：</div>
|
||||||
|
<div class="timebox">
|
||||||
|
<div>
|
||||||
|
<el-scrollbar height="20vh">
|
||||||
|
<p v-if="opsCallList.length === 0">暂无电话拨打记录</p>
|
||||||
|
<el-timeline style="max-width: 99%" class="timeline">
|
||||||
|
<el-timeline-item v-for="(activity, index) in opsCallList" :key="index"
|
||||||
|
icon="MoreFilled" type="primary" size="large">
|
||||||
|
<div class="custom-card">
|
||||||
|
<div style="font-weight: bold">{{ activity.createTime }}</div>
|
||||||
|
<template v-if="activity.data&&activity.data.length>0">
|
||||||
|
<div v-for="(info, index) in activity.data" :key="index">
|
||||||
|
<div class="timeline-row">
|
||||||
|
<span :style="{ color: '#a8abb2' }">{{
|
||||||
|
info.callIdNumber
|
||||||
|
}}</span>
|
||||||
|
<PointTag dictType="call_status" :value="info.callState"
|
||||||
|
class="tag"/>
|
||||||
|
<!-- <span :style="{
|
||||||
|
color: info.callState === '通话中' ? '#6cc23a' : '#409eff'
|
||||||
|
}">{{ info.callState }}</span> -->
|
||||||
|
<span class="span-3th" :style="{ color: '#a8abb2' }">{{
|
||||||
|
info.answeredTime || '00:00:00'
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<div class="footer">
|
<template v-else>
|
||||||
<div>电话拨打记录：</div>
|
<p>暂无电话拨打记录</p>
|
||||||
<div class="timebox">
|
</template>
|
||||||
<div>
|
|
||||||
<el-scrollbar height="20vh">
|
|
||||||
<p v-if="opsCallList.length === 0">暂无电话拨打记录</p>
|
|
||||||
<el-timeline style="max-width: 99%" class="timeline">
|
|
||||||
<el-timeline-item v-for="(activity, index) in opsCallList" :key="index"
|
|
||||||
icon="MoreFilled" type="primary" size="large">
|
|
||||||
<div class="custom-card">
|
|
||||||
<div style="font-weight: bold">{{ activity.createTime }}</div>
|
|
||||||
<div v-for="(info, index) in activity.data" :key="index">
|
|
||||||
<div class="timeline-row">
|
|
||||||
<span :style="{ color: '#a8abb2' }">{{ info.callIdNumber
|
|
||||||
}}</span>
|
|
||||||
<PointTag dictType="call_status" :value="info.callState"
|
|
||||||
class="tag" />
|
|
||||||
<!-- <span :style="{
|
|
||||||
color: info.callState === '通话中' ? '#6cc23a' : '#409eff'
|
|
||||||
}">{{ info.callState }}</span> -->
|
|
||||||
<span class="span-3th" :style="{ color: '#a8abb2' }">{{
|
|
||||||
info.answeredTime || '00:00:00' }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-timeline-item>
|
|
||||||
</el-timeline>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</el-main>
|
</div>
|
||||||
</el-container>
|
</el-timeline-item>
|
||||||
</el-container>
|
</el-timeline>
|
||||||
</div>
|
</el-scrollbar>
|
||||||
</el-dialog>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.header {
|
.header {
|
||||||
font-size: 27px;
|
font-size: 27px;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside-content {
|
.aside-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 3px;
|
left: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content span {
|
.main-content span {
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
color: black;
|
color: black;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content .info {
|
.main-content .info {
|
||||||
border-bottom: 1.5px solid #e4e7ed;
|
border-bottom: 1.5px solid #e4e7ed;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content .body {
|
.main-content .body {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
color: black
|
color: black
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content .body .textBox {
|
.main-content .body .textBox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 10vh;
|
min-height: 10vh;
|
||||||
max-height: 15vh;
|
max-height: 15vh;
|
||||||
border: 1.5px solid #e4e7ed;
|
border: 1.5px solid #e4e7ed;
|
||||||
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content .body .textBox—record {
|
.main-content .body .textBox—record {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 10vh;
|
min-height: 10vh;
|
||||||
// max-height: 15vh;
|
// max-height: 15vh;
|
||||||
// border: 1.5px solid #e4e7ed;
|
// border: 1.5px solid #e4e7ed;
|
||||||
// box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
// box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||||||
// margin-bottom: 20px;
|
// margin-bottom: 20px;
|
||||||
padding: 15px;
|
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
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content .footer {
|
.main-content .footer {
|
||||||
color: black;
|
color: black;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content .timebox {
|
.main-content .timebox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 25vh;
|
height: 25vh;
|
||||||
border: 1.5px solid #e4e7ed;
|
border: 1.5px solid #e4e7ed;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||||||
// overflow-x: hidden;
|
// overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content .timeline {
|
.main-content .timeline {
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 3px;
|
left: 3px;
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content .timeline-row {
|
.main-content .timeline-row {
|
||||||
// border: 1px solid #000;
|
// border: 1px solid #000;
|
||||||
display: flex;
|
display: flex;
|
||||||
// justify-content: space-between;
|
// justify-content: space-between;
|
||||||
// border: 1px solid #000;
|
// border: 1px solid #000;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content .tag {
|
.main-content .tag {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content .span-3th {
|
.main-content .span-3th {
|
||||||
// flex-grow: 1;
|
// flex-grow: 1;
|
||||||
// margin-right:;
|
// margin-right:;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-right: 100px;
|
margin-right: 100px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-card {
|
.custom-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-card span {
|
.custom-card span {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user