订单详情页面

inspur-ui/.env.development

@@ -5,7 +5,7 @@ VUE_APP_TITLE = 96133应急安全服务平台
 ENV = 'development'
 
 # 96133应急安全服务平台/开发环境
-VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = 'http://192.168.2.21/dev-api'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

inspur-ui/src/views/work/workOrder/index.vue

@@ -121,9 +121,9 @@
       </el-table-column>-->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="detailClick(scope.row)"
             v-hasPermi="['work:workOrder:edit']">详情</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="timeLineClick(scope.row)"
+          <el-button size="mini" type="text" icon="el-icon-time" @click="timeLineClick(scope.row)"
             v-hasPermi="['work:workOrder:remove']">时间线</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
             v-hasPermi="['work:workOrder:remove']">删除</el-button>
@@ -220,6 +220,80 @@
       </div>
     </el-dialog>
 
+
+    <el-dialog :visible.sync="openDetail" width="70vw">
+      <div style="display: flex;flex-direction: row;height: 75vh;">
+        <!-- 左侧 -->
+        <div style="flex: 2;border-right: 1px solid #e9ecef;">
+          <el-descriptions :title="detail.elevatorName" direction="vertical" :colon="false"
+            labelStyle="color:#a7b8d8;font-size:12px">
+            <el-descriptions-item label="工单状态">
+              <dict-tag :options="dict.type.sys_accept_status" :value="detail.status" />
+
+            </el-descriptions-item>
+            <el-descriptions-item label="工单生成时间">{{ detail.createDate }}</el-descriptions-item>
+          </el-descriptions>
+
+          <div style="display: flex;flex-direction: row;width: 100%;border-top: 1px solid #e9ecef;padding-top:15px;">
+            <div style="flex: 1;">
+              <el-descriptions title="基础信息" column="1" direction="vertical" :colon="false"
+                labelStyle="color:#a7b8d8;font-size:12px">
+                <el-descriptions-item label="电梯名称">{{ detail.elevatorName }}</el-descriptions-item>
+                <el-descriptions-item label="所在区域">{{ detail.region }}</el-descriptions-item>
+                <el-descriptions-item label="所在小区">{{ detail.community }}</el-descriptions-item>
+                <el-descriptions-item label="所在楼栋">
+                  <!-- <el-tag size="small">学校</el-tag> -->
+                  {{ detail.building }}
+                </el-descriptions-item>
+                <el-descriptions-item label="电梯安全码">{{ detail.securityCode }}</el-descriptions-item>
+              </el-descriptions>
+            </div>
+            <div style="flex: 1;">
+              <el-descriptions title="电梯信息" column="2" direction="vertical" :colon="false"
+                labelStyle="color:#a7b8d8;font-size:12px">
+                <el-descriptions-item label="维保单位" span="2">{{ detail.maintCompany }}</el-descriptions-item>
+                <el-descriptions-item label="维保人员1">{{ detail.maintFristPerson }}</el-descriptions-item>
+                <el-descriptions-item label="电话">{{ detail.maintfristTel }}</el-descriptions-item>
+                <el-descriptions-item label="维保人员2">{{ detail.maintSecondPerson }}</el-descriptions-item>
+                <el-descriptions-item label="电话">{{ detail.maintSecondTel }}</el-descriptions-item>
+
+                <el-descriptions-item label="物业人员">
+                  {{ detail.tenementPerson }}
+                </el-descriptions-item>
+                <el-descriptions-item label="电话">{{ detail.tenementTel }}</el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </div>
+          <div style="display: flex;flex-direction: column;padding-right: 10%;">
+            <div style="color:#a7b8d8;font-size:12px;">通话录音</div>
+            <audio controls :src="detail.callRecording" style="height: 30px;width: 100%;margin-top: 10px;"></audio>
+            <a :href="detail.callRecording" style="align-self: flex-end;margin-top: 4px;">
+              <i class="el-icon-download"></i>下载音频
+            </a>
+          </div>
+
+
+
+        </div>
+        <!-- 右侧 -->
+        <div style="flex: 1">
+          <el-descriptions title=" 救援信息" column="1" style="margin-left: 15px;"
+            labelStyle="color:#a7b8d8;font-size:12px">
+            <el-descriptions-item label="被困人员">{{ detail.trappedPersonTel }}</el-descriptions-item>
+            <el-descriptions-item label="被困时间">{{ detail.createDate }}</el-descriptions-item>
+          </el-descriptions>
+          <el-descriptions title=" 处理信息" column="1" style="margin-left: 15px;"
+            labelStyle="color:#a7b8d8;font-size:12px">
+            <el-descriptions-item label="处理人">{{ detail.handler }}</el-descriptions-item>
+            <el-descriptions-item label="联系电话">{{ detail.handleContactTel }}</el-descriptions-item>
+            <el-descriptions-item label="处理部门">{{ detail.handleDepart }}</el-descriptions-item>
+            <el-descriptions-item label="处理时间">{{ detail.handleTime }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </div>
+
+    </el-dialog>
+
     <el-dialog title="时间线" :visible.sync="timeLineOpen" width="600px">
       <div style="width: 100%;height: 70vh;  display: flex;flex-wrap: wrap;overflow-y:auto;">
         <el-timeline style="width:90%;margin-top: 5px;">
@@ -246,6 +320,12 @@
       </div>
 
     </el-dialog>
+
+
+
+
+
+
   </div>
 </template>
 
@@ -291,7 +371,9 @@ export default {
       rules: {
       },
       timeLineOpen: false,
-      nodeList: []
+      nodeList: [],
+      openDetail: false,
+      detail: {}
     };
   },
   created() {
@@ -384,6 +466,16 @@ export default {
         this.title = "修改工单列表";
       });
     },
+
+    detailClick(row) {
+      const id = row.id || this.ids
+      getWorkOrder(id).then(response => {
+        this.detail = response.data;
+        this.openDetail = true;
+
+      });
+    },
+
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {