工单详情

app/Http/Controllers/AlarmOrderController.php

@@ -156,6 +156,8 @@ class AlarmOrderController extends Controller
             s.status_name
             ')
             ->first();
+        // 工单进度
+        $order['step'] = AlarmOrderSchedule::where('alarm_order_id', '=', $request->input('id'))->get();
        return $this->jsonSuccessData($order);
     }
 

resources/js/api/alarmOrder.js

@@ -40,3 +40,10 @@ export function alarmOrderUsers() {
     method: 'get',
   });
 }
+// 工单详情
+export function alarmOrderDetail(id) {
+  return request({
+    url: '/alarm_order/show?id=' + id,
+    method: 'get',
+  });
+}

resources/js/views/alarm-order/index.vue

@@ -113,21 +113,180 @@
           <span>{{ scope.row.updated_at }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="--">
+        <template slot-scope="scope">
+          <el-button @click="alarmShow(scope.row)">详细信息</el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <el-tooltip placement="top" content="tooltip">
       <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
     </el-tooltip>
+    <el-dialog title="工单详细信息" :visible.sync="dialogTableVisible" width="70%">
+      <el-steps :active="order_content.isorderone" align-center style="margin-bottom: 40px;">
+        <el-step v-for="item in order_step" :key="item.schedule" :title="stepFilter(item.schedule)" :description="item.content"></el-step>
+      </el-steps>
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <div class="amap-page-container" style="height: 350px; width: 350px;">
+            <el-amap
+              ref="map"
+              vid="amapDemo"
+              :amap-manager="amapManager"
+              :zoom="zoom"
+              :center="center"
+              :events="events"
+              class="amap-demo"
+              :plugin="plugin"
+            >
+              <el-amap-circle-marker
+                :visible="true"
+                :center="marker.devicecoord | deviceLocationFilter(marker.devicecoord)"
+                :radius="13"
+                :fill-color="marker.devicepolice | deviceStatusFilter('color')"
+                :fill-opacity="1"
+                :stroke-color="'#ccc'"
+                :stroke-opacity="0.9"
+              ></el-amap-circle-marker>
+            </el-amap>
+          </div>
+        </el-col>
+        <el-col :span="16">
+          <el-row>
+            <el-col :span="12">
+              <el-form size="mini">
+                <el-form-item label="订单编号">{{ order_content.order_num }}</el-form-item>
+                <el-form-item label="订单时间">{{ order_content.created_at }}</el-form-item>
+                <el-form-item label="设备编号">{{ order_content.devicenumber }}</el-form-item>
+                <el-form-item label="设备名称">{{ order_content.username }}</el-form-item>
+                <el-form-item label="类型">{{ order_content.tname }}</el-form-item>
+                <el-form-item label="检测介质">{{ order_content.gas }}</el-form-item>
+                <el-form-item label="位置">{{ order_content.deviceinfo }}</el-form-item>
+                <el-form-item label="坐标">{{ order_content.devicecoord }}</el-form-item>
+              </el-form>
+            </el-col>
+            <el-col :span="12">
+              <el-form size="mini">
+                <el-form-item label="检测值">{{ order_content.concentration + order_content.danwei }}</el-form-item>
+                <el-form-item label="报警类型">{{ order_content.status_name }}</el-form-item>
+                <el-form-item label="报警开始时间">{{ order_content.start_time }}</el-form-item>
+                <el-form-item label="报警结束时间">{{ order_content.status_name }}</el-form-item>
+              </el-form>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import clip from '@/utils/clipboard';
 import BackToTop from '@/components/BackToTop';
-import { alarmOrderUsers, alarmOrderList } from '@/api/alarmOrder';
+import { alarmOrderUsers, alarmOrderList, alarmOrderDetail } from '@/api/alarmOrder';
+import Vue from 'vue';
+import VueAMap from 'vue-amap';
+import { AMapManager } from 'vue-amap';
+Vue.use(VueAMap);
+
+// 初始化vue-amap
+VueAMap.initAMapApiLoader({
+  // 高德的key
+  key: '95cc1b89d62f020ce5a21ec503daef6c',
+  // 插件集合
+  plugin: [
+    'AMap.Autocomplete',
+    'AMap.PlaceSearch',
+    'AMap.Scale',
+    'AMap.OverView',
+    'AMap.ToolBar',
+    'AMap.MapType',
+    'AMap.PolyEditor',
+    'AMap.CircleEditor',
+  ],
+  // 高德 sdk 版本，默认为 1.4.4
+  v: '1.4.15',
+  uiVersion: '1.0.11',
+});
 export default {
   components: { BackToTop },
+  filters: {
+    deviceLocationFilter(center) {
+      if (center === null) {
+        return '';
+      }
+      center = center.replace(/\s*/g, '');
+      return center.split(',');
+    },
+    deviceStatusFilter(status, cate) {
+      var statuses = [];
+      statuses[1] = { color: '#1c7a17', name: '正常' };
+      statuses[2] = { color: '#f6e032', name: '错误' };
+      statuses[3] = { color: '#f6e032', name: '传感器故障' };
+      statuses[4] = { color: '#f30016', name: '报警' };
+      statuses[5] = { color: '#f42f18', name: '低报' };
+      statuses[6] = { color: '#97000b', name: '高报' };
+      statuses[7] = { color: '#f6e032', name: '通信故障' };
+      statuses[8] = { color: '#f6e032', name: '超量程' };
+      statuses[9] = { color: '#747677', name: '离线' };
+      statuses[10] = { color: '#f6e032', name: '电量低' };
+      statuses[11] = { color: '#f6e032', name: '主电故障' };
+      statuses[12] = { color: '#f6e032', name: '备电故障' };
+      statuses[13] = { color: '#f6e032', name: '无此节点' };
+      statuses[14] = { color: '#f6e032', name: '低电压' };
+      statuses[15] = { color: '#f6e032', name: '故障' };
+      statuses[16] = { color: '#97000b', name: '报警联动' };
+      if (cate === 'color') {
+        return statuses[status].color;
+      } else if (cate === 'status') {
+        return statuses[status].name;
+      }
+    },
+  },
   data() {
+    const _this = this;
     return {
+      order_content: {},
+      order_step: [],
+      marker: {
+        devicecoord: '114.505208, 38.045474',
+        devicepolice: 5,
+      },
+      map: {},
+      amapManager: new AMapManager(),
+      zoom: 13,
+      center: [114.505208, 38.045474],
+      events: {
+        init: (o) => {
+          o.setMapStyle('amap://styles/normal');
+          // console.log(o.getCenter());
+          // console.log(this.$refs.map.$$getInstance());
+          o.getCity(result => {
+            // console.log(result);
+          });
+        },
+        'moveend': () => {
+        },
+        'zoomchange': () => {
+          _this.zoom = this.$refs.map.$$getInstance().getZoom();
+        },
+        'click': (e) => {
+          // alert('map clicked');
+        },
+      },
+      plugin: [{
+        pName: 'ToolBar',
+        position: 'LB',
+      }, {
+        pName: 'MapType',
+        defaultType: 0,
+        events: {
+          init(o) {
+            console.log(o);
+          },
+        },
+      }],
+      dialogTableVisible: false,
       alarmOrders: [],
       alarmOrderUsersData: [{
         id: 0,
@@ -194,6 +353,24 @@ export default {
     this.alarmOrdersData();
   },
   methods: {
+    stepFilter(step) {
+      const steps = [];
+      steps[1] = '待接单';
+      steps[2] = '已接单';
+      steps[3] = '进行中';
+      steps[4] = '已完成';
+      steps[5] = '异常终止';
+      return steps[step];
+    },
+    alarmShow(data) {
+      this.marker.devicecoord = data.devicecoord;
+      this.marker.devicepolice = data.policestatus;
+      // 地图中心
+      this.center = data.devicecoord.replace(/\s*/g, '').split(',');
+      console.log(data);
+      this.orderDetail(data.id);
+      this.dialogTableVisible = true;
+    },
     orderStateFilter(state) {
       const status = [];
       status[0] = '未接单';
@@ -202,6 +379,34 @@ export default {
       status[3] = '异常终止';
       return status[state];
     },
+    // 工单详情
+    orderDetail(id) {
+      alarmOrderDetail(id).then(response => {
+        const all_steps = [{
+          schedule: 1, content: '未接单',
+        }, {
+          schedule: 2, content: '进行中',
+        }, {
+          schedule: 3, content: '完成',
+        }, {
+          schedule: 4, content: '异常终止',
+        }];
+        if (response.code === 200) {
+          console.log(response.data);
+          this.order_content = response.data;
+          const order_step = response.data.step;
+          for (var step in all_steps) {
+            if (order_step[step]) {
+              all_steps[step] = order_step[step];
+            }
+          }
+          this.order_step = all_steps;
+          console.log(this.order_step);
+        }
+      }).catch(err => {
+        console.log(err);
+      });
+    },
     // 可以派单的人员
     orderUsers(data) {
       alarmOrderUsers().then(response => {