|
|
@@ -9,131 +9,54 @@
|
|
|
<div class="filter">
|
|
|
<div class="condition">
|
|
|
<span>关键字 : </span>
|
|
|
- <el-input
|
|
|
- :clearable="true"
|
|
|
- v-model="searchInput.keyWord"
|
|
|
- class="w-50 m-2"
|
|
|
- placeholder="请输入工单号或姓名"
|
|
|
- style="width: 180px"
|
|
|
- />
|
|
|
+ <el-input :clearable="true" v-model="searchInput.keyWord" class="w-50 m-2" placeholder="请输入工单号或姓名"
|
|
|
+ style="width: 180px" />
|
|
|
</div>
|
|
|
<div class="condition">
|
|
|
<span>评价时间 : </span>
|
|
|
- <el-date-picker
|
|
|
- v-model="searchInput.createTime"
|
|
|
- type="daterange"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="起始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- format="YYYY-MM-DD"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- :prefix-icon="Calendar"
|
|
|
- placeholder="请选择日期"
|
|
|
- :clearable="true"
|
|
|
- />
|
|
|
+ <el-date-picker v-model="searchInput.createTime" type="daterange" range-separator="-" start-placeholder="起始时间"
|
|
|
+ end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :prefix-icon="Calendar"
|
|
|
+ placeholder="请选择日期" :clearable="true" />
|
|
|
</div>
|
|
|
|
|
|
- <el-button
|
|
|
- style="margin-left: 20px"
|
|
|
- color="rgba(111, 182, 184, 1)"
|
|
|
- type="primary"
|
|
|
- class="search"
|
|
|
- @click="searchBtn"
|
|
|
- ><el-icon><Search /></el-icon> <span>查询</span></el-button
|
|
|
- >
|
|
|
+ <el-button style="margin-left: 20px" color="rgba(111, 182, 184, 1)" type="primary" class="search"
|
|
|
+ @click="searchBtn"><el-icon>
|
|
|
+ <Search />
|
|
|
+ </el-icon> <span>查询</span></el-button>
|
|
|
</div>
|
|
|
<!-- 按钮列表 -->
|
|
|
<div class="gongneng">
|
|
|
- <el-button
|
|
|
- color="rgba(111, 182, 184, 1)"
|
|
|
- class="import"
|
|
|
- type="primary"
|
|
|
- @click="importExcel"
|
|
|
- ><img
|
|
|
- src="@/assets/import.png"
|
|
|
- style="width: 14px; height: 14px; margin-right: 4px"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <span>导出表单</span></el-button
|
|
|
- >
|
|
|
+ <el-button color="rgba(111, 182, 184, 1)" class="import" type="primary" @click="importExcel"><img
|
|
|
+ src="@/assets/import.png" style="width: 14px; height: 14px; margin-right: 4px" alt="" />
|
|
|
+ <span>导出表单</span></el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="footer">
|
|
|
- <el-table
|
|
|
- :row-class-name="tableRowClassName"
|
|
|
- :data="tableData.list"
|
|
|
- style="width: 100%"
|
|
|
- :header-cell-style="{
|
|
|
- background: 'rgba(240, 243, 247, 1)',
|
|
|
- height: '50px',
|
|
|
- border: 0,
|
|
|
- }"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- width="180"
|
|
|
- prop="recordNo"
|
|
|
- label="工单编号"
|
|
|
- />
|
|
|
+ <el-table :row-class-name="tableRowClassName" :data="tableData.list" style="width: 100%" :header-cell-style="{
|
|
|
+ background: 'rgba(240, 243, 247, 1)',
|
|
|
+ height: '50px',
|
|
|
+ border: 0,
|
|
|
+ }">
|
|
|
+ <el-table-column align="center" width="180" prop="recordNo" label="工单编号" />
|
|
|
<el-table-column align="center" prop="userName" label="姓名" />
|
|
|
<el-table-column align="center" prop="userPhone" label="电话" />
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- width="180"
|
|
|
- prop="description"
|
|
|
- label="故障描述"
|
|
|
- show-overflow-tooltip
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- width="170"
|
|
|
- prop="reportTime"
|
|
|
- label="报修时间"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- prop="maintenancerName"
|
|
|
- label="技术员"
|
|
|
- />
|
|
|
+ <el-table-column align="center" width="180" prop="description" label="故障描述" show-overflow-tooltip />
|
|
|
+ <el-table-column align="center" width="170" prop="reportTime" label="报修时间" />
|
|
|
+ <el-table-column align="center" prop="maintenancerName" label="技术员" />
|
|
|
<el-table-column align="center" label="评价星级" width="160">
|
|
|
<template #default="{ row, index }">
|
|
|
- <el-rate
|
|
|
- v-model="row.star"
|
|
|
- allow-half
|
|
|
- color="rgba(234, 149, 24, 1)"
|
|
|
- size="large"
|
|
|
- disabled
|
|
|
- disabled-void-color="rgba(179, 179, 179, 1)"
|
|
|
- />
|
|
|
+ <el-rate v-model="row.star" allow-half color="rgba(234, 149, 24, 1)" size="large" disabled
|
|
|
+ disabled-void-color="rgba(179, 179, 179, 1)" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- width="160"
|
|
|
- show-overflow-tooltip
|
|
|
- prop="content"
|
|
|
- label="评价内容"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- prop="createTime"
|
|
|
- width="180"
|
|
|
- label="评价时间"
|
|
|
- />
|
|
|
+ <el-table-column align="center" width="160" show-overflow-tooltip prop="content" label="评价内容" />
|
|
|
+ <el-table-column align="center" prop="createTime" width="180" label="评价时间" />
|
|
|
<el-table-column align="center" label="操作" width="220">
|
|
|
<template #default="scope">
|
|
|
<div class="edit">
|
|
|
<div class="look" @click="orderInfo(scope.row)">详情</div>
|
|
|
- <el-popconfirm
|
|
|
- width="220"
|
|
|
- confirm-button-text="确认"
|
|
|
- cancel-button-text="取消"
|
|
|
- :icon="InfoFilled"
|
|
|
- icon-color="#f89626"
|
|
|
- title="是否删除这条评价?"
|
|
|
- @confirm="confirmEvent(scope.row)"
|
|
|
- @cancel="cancelEvent"
|
|
|
- >
|
|
|
+ <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
|
|
|
+ icon-color="#f89626" title="是否删除这条评价?" @confirm="confirmEvent(scope.row)" @cancel="cancelEvent">
|
|
|
<template #reference>
|
|
|
<div class="look">删除</div>
|
|
|
</template>
|
|
|
@@ -144,16 +67,8 @@
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<!-- 详情弹窗 -->
|
|
|
- <el-dialog
|
|
|
- class="orderInfo"
|
|
|
- v-model="orderInfoVisible"
|
|
|
- :close-on-click-modal="false"
|
|
|
- :close-on-press-escape="false"
|
|
|
- title="评价详情"
|
|
|
- align-center
|
|
|
- width="760"
|
|
|
- :before-close="cancelOrderInfo"
|
|
|
- >
|
|
|
+ <el-dialog class="orderInfo" v-model="orderInfoVisible" :close-on-click-modal="false" :close-on-press-escape="false"
|
|
|
+ title="评价详情" align-center width="760" :before-close="cancelOrderInfo">
|
|
|
<div class="order_info">
|
|
|
<!-- 工单详情 工单信息 -->
|
|
|
<div class="title">
|
|
|
@@ -161,31 +76,25 @@
|
|
|
<span>工单信息</span>
|
|
|
</div>
|
|
|
<div class="workNum">
|
|
|
- <span class="titles">工单编号:</span
|
|
|
- ><span>{{ orderInfoData.recordNo }}</span>
|
|
|
+ <div class="titles">工单编号:</div><span>{{ orderInfoData.recordNo }}</span>
|
|
|
</div>
|
|
|
<div class="workNum">
|
|
|
- <span class="titles">报修姓名:</span
|
|
|
- ><span>{{ orderInfoData.userName }}</span>
|
|
|
+ <div class="titles">报修姓名:</div><span>{{ orderInfoData.userName }}</span>
|
|
|
</div>
|
|
|
<div class="workNum">
|
|
|
- <span class="titles">报修电话:</span
|
|
|
- ><span>{{ orderInfoData.userPhone }}</span>
|
|
|
+ <div class="titles">报修电话:</div><span>{{ orderInfoData.userPhone }}</span>
|
|
|
</div>
|
|
|
<div class="workNum">
|
|
|
- <span class="titles">故障类型:</span
|
|
|
- ><span>{{ orderInfoData.articleName }}</span>
|
|
|
+ <div class="titles">故障类型:</div><span>{{ orderInfoData.articleName }}</span>
|
|
|
</div>
|
|
|
<div class="workNum">
|
|
|
- <span class="titles">故障描述:</span
|
|
|
- ><span>{{ orderInfoData.description }}</span>
|
|
|
+ <div class="titles">故障描述:</div><span>{{ orderInfoData.description }}</span>
|
|
|
</div>
|
|
|
<div class="workNum">
|
|
|
- <span class="titles">报修区域:</span
|
|
|
- ><span>{{ orderInfoData.address }}</span>
|
|
|
+ <div class="titles">报修区域:</div><span>{{ orderInfoData.areaName }}{{ orderInfoData.address }}</span>
|
|
|
</div>
|
|
|
<div class="workNum">
|
|
|
- <span class="titles">报修录音:</span>
|
|
|
+ <div class="titles">报修录音:</div>
|
|
|
<div class="audio" @click="bofang">
|
|
|
<img src="@/assets/audio.png" alt="" />
|
|
|
<div class="audioNum">{{ orderInfoData.voiceLength }}"</div>
|
|
|
@@ -194,27 +103,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="workNum">
|
|
|
- <span class="titles">报修时间:</span
|
|
|
- ><span>{{ orderInfoData.reportTime }}</span>
|
|
|
+ <div class="titles">报修时间:</div><span>{{ orderInfoData.reportTime }}</span>
|
|
|
</div>
|
|
|
<div class="workNum">
|
|
|
- <span class="titles">评价内容:</span
|
|
|
- ><span>{{ orderInfoData.content }}</span>
|
|
|
+ <div class="titles">评价内容:</div><span>{{ orderInfoData.content }}</span>
|
|
|
</div>
|
|
|
<div class="workNum">
|
|
|
- <span class="titles">评价时间:</span
|
|
|
- ><span>{{ orderInfoData.createTime }}</span>
|
|
|
+ <div class="titles">评价时间:</div><span>{{ orderInfoData.createTime }}</span>
|
|
|
</div>
|
|
|
<div class="workNums">
|
|
|
- <span class="titles">评价星级:</span>
|
|
|
- <el-rate
|
|
|
- v-model="orderInfoData.star"
|
|
|
- allow-half
|
|
|
- color="rgba(234, 149, 24, 1)"
|
|
|
- size="large"
|
|
|
- disabled
|
|
|
- disabled-void-color="rgba(179, 179, 179, 1)"
|
|
|
- />
|
|
|
+ <div class="titles">评价星级:</div>
|
|
|
+ <el-rate v-model="orderInfoData.star" allow-half color="rgba(234, 149, 24, 1)" size="large" disabled
|
|
|
+ disabled-void-color="rgba(179, 179, 179, 1)" />
|
|
|
</div>
|
|
|
<!-- 工单详情 报修进度 -->
|
|
|
<div class="title">
|
|
|
@@ -233,28 +133,22 @@
|
|
|
<el-steps direction="vertical" :active="orderInfoData.tracks.length">
|
|
|
<el-step v-for="(i, index) in orderInfoData.tracks">
|
|
|
<template v-slot:icon>
|
|
|
- <img
|
|
|
- style="width: 20px; height: 20px"
|
|
|
- src="@/assets/step_common.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img style="width: 20px; height: 20px" src="@/assets/step_common.png" alt="" />
|
|
|
</template>
|
|
|
<template v-slot:title>
|
|
|
<span>{{ i.state }}</span>
|
|
|
</template>
|
|
|
<template v-slot:description>
|
|
|
<div class="content">
|
|
|
- <span
|
|
|
- >[{{ i.userZzstr }}]{{ i.user_name }}{{ i.user_phone }}
|
|
|
- {{ i.createTime }}</span
|
|
|
- >
|
|
|
+ <span>[{{ i.userZzstr }}]{{ i.userName }}{{ i.userPhone }}
|
|
|
+ {{ i.createTime }}</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div>{{ i.content }}</div>
|
|
|
<!-- 评价图片 -->
|
|
|
<div v-if="i.images" class="evaluateImg">
|
|
|
<div v-for="(item, index) in i.images">
|
|
|
- <img :key="index" :src="item" alt="" />
|
|
|
+ <img @click="lookImg(item)" :key="index" :src="item" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 评价录音 -->
|
|
|
@@ -262,11 +156,7 @@
|
|
|
<img src="@/assets/audio.png" alt="" />
|
|
|
<div class="audioNum">{{ i.voiceLength }}"</div>
|
|
|
<!-- <button class="butt" @click="bofang">确认</button> -->
|
|
|
- <audio
|
|
|
- :id="`audio${i.id}`"
|
|
|
- class="aud"
|
|
|
- :src="i.voice"
|
|
|
- ></audio>
|
|
|
+ <audio :id="`audio${i.id}`" class="aud" :src="i.voice"></audio>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -278,14 +168,11 @@
|
|
|
<!-- 分页组件 -->
|
|
|
<div class="pageSize">
|
|
|
<span></span>
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- :current-page="currentPage"
|
|
|
- :page-size="pageSize"
|
|
|
- layout="total, prev, pager, next, jumper, slot"
|
|
|
- :total="total"
|
|
|
- @update:current-page="handleCurrentChange"
|
|
|
- />
|
|
|
+ <el-pagination background :current-page="currentPage" :page-size="pageSize"
|
|
|
+ layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
|
|
|
+ </div>
|
|
|
+ <div class="bgImg" v-if="bgImg">
|
|
|
+ <img @click="bgImg = false" :src="bgImgurl" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -318,6 +205,7 @@ const orderInfoData = ref({
|
|
|
description: "", // 故障描述
|
|
|
articleId: "", // 报修类型
|
|
|
address: "", // 报修区域
|
|
|
+ areaName: "",// 报修校区地址
|
|
|
voice: "", // 报修录音
|
|
|
voiceLength: "", // 报修录音时长
|
|
|
reportTime: "", // 报修时间
|
|
|
@@ -328,6 +216,8 @@ const orderInfoData = ref({
|
|
|
star: "", // 评价星级
|
|
|
tracks: [],
|
|
|
});
|
|
|
+const bgImg = ref(false)// 点击查看图片
|
|
|
+const bgImgurl = ref() // 点击查看图片地址
|
|
|
|
|
|
const searchInput = reactive({
|
|
|
keyWord: "",
|
|
|
@@ -427,6 +317,7 @@ const orderInfo = async (row) => {
|
|
|
orderInfoData.value.userPhone = res.data.data.userPhone;
|
|
|
orderInfoData.value.description = res.data.data.description;
|
|
|
orderInfoData.value.address = res.data.data.address;
|
|
|
+ orderInfoData.value.areaName = res.data.data.areaName;
|
|
|
orderInfoData.value.articleName = res.data.data.articleName;
|
|
|
orderInfoData.value.voice = res.data.data.voice;
|
|
|
orderInfoData.value.voiceLength = res.data.data.voiceLength;
|
|
|
@@ -488,6 +379,12 @@ const audioPlay = (i) => {
|
|
|
// timer = null;
|
|
|
}
|
|
|
};
|
|
|
+// 点击工单步骤中的图片查看
|
|
|
+const lookImg = (item) => {
|
|
|
+ bgImg.value = true
|
|
|
+ bgImgurl.value = item
|
|
|
+}
|
|
|
+
|
|
|
// 工单详情删除按钮 (工单详情-----------------------------------)
|
|
|
// const orderInfo = (row) => {
|
|
|
// orderInfoVisible.value = true;
|
|
|
@@ -637,6 +534,7 @@ onUnmounted(() => {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
box-shadow: 0px 3px 10px rgba(213, 228, 252, 1);
|
|
|
+
|
|
|
.left {
|
|
|
// width: calc(100wh - 40px);
|
|
|
display: flex;
|
|
|
@@ -647,59 +545,73 @@ onUnmounted(() => {
|
|
|
color: rgb(0, 0, 0);
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
+
|
|
|
span {
|
|
|
margin-right: 20px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.is_active {
|
|
|
color: rgba(111, 182, 184, 1);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.middle {
|
|
|
width: 96%;
|
|
|
margin: 0 auto;
|
|
|
|
|
|
color: #000;
|
|
|
+
|
|
|
// border-bottom: 1px solid rgb(231, 231, 231);
|
|
|
.filter {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
margin: 10px 0 0 0;
|
|
|
+
|
|
|
.search {
|
|
|
color: #fff;
|
|
|
}
|
|
|
+
|
|
|
.condition {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin: 10px 30px 10px 0;
|
|
|
+
|
|
|
:deep(.el-input .el-input__inner) {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
+
|
|
|
span {
|
|
|
margin: 0 10px 0 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.gongneng {
|
|
|
margin: 10px 0 15px 0;
|
|
|
+
|
|
|
span {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
:deep(.cont) {
|
|
|
width: 60%;
|
|
|
margin: 20px auto;
|
|
|
}
|
|
|
+
|
|
|
:deep(.download) {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin: 10px;
|
|
|
}
|
|
|
+
|
|
|
:deep(.download span) {
|
|
|
font-size: 16px;
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
+
|
|
|
:deep(.cont .el-button) {
|
|
|
margin-left: 60px;
|
|
|
margin-bottom: 30px;
|
|
|
@@ -710,33 +622,41 @@ onUnmounted(() => {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
:deep(.cont .accomplish .el-button) {
|
|
|
width: 50%;
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.footer {
|
|
|
width: 96%;
|
|
|
height: 550px;
|
|
|
margin: 10px auto 30px;
|
|
|
+
|
|
|
.el-table--fit {
|
|
|
height: 100%;
|
|
|
+
|
|
|
:deep(.el-table__header-wrapper) {
|
|
|
background-color: #000;
|
|
|
font-size: 16px;
|
|
|
+
|
|
|
tr {
|
|
|
color: #000;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-table__row) {
|
|
|
height: 50px;
|
|
|
font-size: 16px;
|
|
|
color: #000;
|
|
|
+
|
|
|
.el-rate__icon {
|
|
|
//评分图标大小
|
|
|
font-size: 25px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-table__row td) {
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
@@ -745,61 +665,74 @@ onUnmounted(() => {
|
|
|
.el-button--primary {
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-table__body .even) {
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-table__body .odd) {
|
|
|
background-color: rgba(240, 243, 247, 1);
|
|
|
}
|
|
|
+
|
|
|
:deep(.edit) {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
color: rgba(111, 182, 184, 1);
|
|
|
}
|
|
|
+
|
|
|
:deep(.look) {
|
|
|
padding: 0 10px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
// :deep(.look):hover {
|
|
|
// color: red;
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// 详情样式
|
|
|
:deep(.orderInfo) {
|
|
|
height: 800px;
|
|
|
overflow: hidden;
|
|
|
border-radius: 11px;
|
|
|
+
|
|
|
.el-dialog__header {
|
|
|
border-radius: 11px 11px 0 0;
|
|
|
background: rgba(237, 241, 245, 1);
|
|
|
font-weight: 600;
|
|
|
margin: 0;
|
|
|
+
|
|
|
.el-dialog__headerbtn {
|
|
|
outline: none;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.el-dialog__body {
|
|
|
height: 720px;
|
|
|
overflow: auto;
|
|
|
padding: 0px 20px 10px 20px;
|
|
|
+
|
|
|
.order_info {
|
|
|
.title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin: 25px 0 10px 0;
|
|
|
+
|
|
|
img {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+
|
|
|
span {
|
|
|
color: #000;
|
|
|
font-size: 18px;
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// 工单详情 排列模式样式
|
|
|
.workNum {
|
|
|
display: flex;
|
|
|
@@ -816,36 +749,44 @@ onUnmounted(() => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
+
|
|
|
img {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
+
|
|
|
.audioNum {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.titles {
|
|
|
color: rgba(128, 128, 128, 1);
|
|
|
font-weight: 200;
|
|
|
display: inline-block;
|
|
|
width: 80px;
|
|
|
}
|
|
|
+
|
|
|
span:nth-child(2) {
|
|
|
color: #000;
|
|
|
font-weight: 600;
|
|
|
+ width: 640px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.workNums {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 12px;
|
|
|
font-size: 16px;
|
|
|
+
|
|
|
.el-rate__item {
|
|
|
.el-icon {
|
|
|
font-size: 25px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.titles {
|
|
|
color: rgba(128, 128, 128, 1);
|
|
|
font-weight: 200;
|
|
|
@@ -853,16 +794,20 @@ onUnmounted(() => {
|
|
|
width: 80px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// 工单详情 步骤条样式
|
|
|
.steps {
|
|
|
.el-step {
|
|
|
+
|
|
|
// margin: 15px 0;
|
|
|
.el-step__main {
|
|
|
display: flex;
|
|
|
margin-bottom: 15px;
|
|
|
+
|
|
|
span {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
+
|
|
|
.el-step__title {
|
|
|
padding: 0 10px 0 0;
|
|
|
|
|
|
@@ -875,21 +820,25 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.el-step__description {
|
|
|
.content {
|
|
|
margin-top: 7px;
|
|
|
}
|
|
|
+
|
|
|
.evaluateImg {
|
|
|
width: 500px;
|
|
|
margin: 10px 0;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+
|
|
|
img {
|
|
|
width: 80px;
|
|
|
// height: 40px;
|
|
|
margin: 5px 10px 0 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.audio {
|
|
|
width: 98px;
|
|
|
height: 30px;
|
|
|
@@ -899,11 +848,13 @@ onUnmounted(() => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
+
|
|
|
img {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
+
|
|
|
.audioNum {
|
|
|
font-size: 16px;
|
|
|
color: #000;
|
|
|
@@ -915,45 +866,56 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.pageSize {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin: 0 30px;
|
|
|
+
|
|
|
span {
|
|
|
color: #000;
|
|
|
}
|
|
|
+
|
|
|
.el-pagination {
|
|
|
+
|
|
|
// width: 1600px;
|
|
|
:deep(.el-pagination__total) {
|
|
|
color: #000;
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-pagination__goto) {
|
|
|
color: #000;
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-pagination__classifier) {
|
|
|
color: #000;
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-input__wrapper) {
|
|
|
border: 1px solid rgba(0, 0, 0, 1);
|
|
|
border-radius: 5px;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-pager li) {
|
|
|
margin: 0 5px;
|
|
|
border: 1px solid rgba(0, 0, 0, 1);
|
|
|
border-radius: 5px;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-pager li.is-active) {
|
|
|
background-color: rgba(111, 182, 184, 1);
|
|
|
}
|
|
|
+
|
|
|
:deep(.btn-prev) {
|
|
|
margin-right: 5px;
|
|
|
border: 1px solid rgba(0, 0, 0, 1);
|
|
|
border-radius: 5px;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
+
|
|
|
:deep(.btn-next) {
|
|
|
margin-left: 5px;
|
|
|
border: 1px solid rgba(0, 0, 0, 1);
|
|
|
@@ -962,7 +924,24 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .bgImg {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 99999999;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(255, 255, 255, 0.8);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.el-input {
|
|
|
width: 192px;
|
|
|
}
|