Merge branch 'release/sweep_check'

# Conflicts:
#	resources/js/router/index.js

app/Http/Controllers/DevicesController.php

@@ -502,6 +502,10 @@ class DevicesController extends Controller
                 $user_id = $request->get('uid');
                 $where['device.uid'] = $user_id;
             }
+            if ($request->has('devicestatus')) {
+                $devicestatus = $request->get('devicestatus');
+                $where['device.devicestatus'] = $devicestatus;
+            }
             $data = DB::table('device')
                 ->join('status as s', 'device.devicepolice', '=', 's.id')
                 ->select('device.id', 'device.uid', 'device.nd', 'device.deviceinfo', 'device.devicenum', 'device.devicecoord', 'device.devicepolice', 'device.deviceremark', 'device.devicelinkman', 's.status_name')

resources/js/router/index.js

@@ -27,6 +27,7 @@ import monitorRoutes from './modules/monitor.js';
 import userdeviceRoutes from './modules/userdevice';
 import alarmOrderRoutes from './modules/alarm-order';
 import meetemergency from './modules/meetemergency';
+import sweepCheckRoutes from './modules/sweep-check';
 
 /**
  * Sub-menu only appear when children.length>=1
@@ -159,6 +160,7 @@ export const asyncRoutes = [
   userdeviceRoutes,
   alarmOrderRoutes,
   meetemergency,
+  sweepCheckRoutes,
   // {
   //   path: '/userdevice',
   //   component: Layout,

resources/js/router/modules/sweep-check.js

+import Layout from '@/layout';
+
+const sweepCheckRoutes = {
+  path: '/sweep-check',
+  component: Layout,
+  redirect: '/sweep-check/index',
+  name: 'sweep-check',
+  alwaysShow: true,
+  meta: {
+    title: '隐患排查治理',
+    icon: 'star',
+    permissions: ['view menu admin'],
+  },
+  children: [
+    {
+      path: 'security',
+      component: () => import('@/views/sweep-check/security'),
+      name: 'SecurityCheck',
+      meta: { title: '安检计划', icon: 'list', permissions: ['manage admin'] },
+    }, {
+      path: 'record',
+      component: () => import('@/views/sweep-check/record'),
+      name: 'Record',
+      meta: { title: '隐患排查记录', icon: 'list', permissions: ['manage admin'] },
+    }, {
+      path: 'ledger',
+      component: () => import('@/views/sweep-check/ledger'),
+      name: 'Ledger',
+      meta: { title: '隐患台账', icon: 'list', permissions: ['manage admin'] },
+    },
+  ],
+};
+export default sweepCheckRoutes;

resources/js/views/map/index.vue

@@ -35,10 +35,28 @@
         :events="markerClickEvent(marker)"
         :check="playAudio(marker.devicepolice)"
       ></el-amap-circle-marker>
+      <!-- 应急物资 -->
+      <el-amap-marker
+        v-for="(marker, index) in markersGoods"
+        :key="marker.id+'wz'"
+        :position="marker.mapcenter | rebuildUserCenter(marker.mapcenter)"
+        :visible="markersGoodsVisible"
+        :content="marker.name | rebuildGoodsContent(marker.total, marker.color)"
+        :vid="index"
+        :clickable="true"
+        :events="checkPermission(['manage isadmin']) ? rebuildGoodsEvent(marker) : ''"
+        :z-index="markerUserZIndex"
+      ></el-amap-marker>
       <!-- 右上角设备和用户切换按钮 -->
       <div class="toolbar">
-        <el-button v-if="leftDeviceName != '全部设备' " type="primary" size="mini" round @click="allDevices">全部设备</el-button>
+        <el-button type="primary" size="mini" round @click="allDevices">全部设备</el-button>
         <!-- <el-button v-if="checkPermission(['manage device'])" type="primary" size="mini" round @click="allDevices">全部设备</el-button> -->
+        <el-button type="primary" size="mini" round @click="getDangerDeviceList">隐患设备</el-button>
+        <el-switch
+          v-model="markersGoodsVisible"
+          active-text="应急物资"
+        >
+        </el-switch>
         <el-switch
           v-model="markersDeviceVisible"
           active-text="设备"
@@ -139,6 +157,11 @@ VueAMap.initAMapApiLoader({
 
 export default {
   filters: {
+    rebuildGoodsContent(name, count, color) {
+      let mcontent = '<div class="mapIcon"><span class="mapIcon_title">%name</span><span class="mapIcon_num_all" style="background-color:%color">%num</span></div>';
+      mcontent = mcontent.replace(/%name/, name).replace(/%num/, count).replace(/%color/, color);
+      return mcontent;
+    },
     rebuildContent(company, deviceCount, alarmCount) {
       let mcontent = '<div class="mapIcon"><span class="mapIcon_title">%name</span><span class="mapIcon_num_all">%num</span><span class="mapIcon_num">%alarm</span></div>';
       mcontent = mcontent.replace(/%name/, company).replace(/%num/, deviceCount).replace(/%alarm/, alarmCount);
@@ -186,6 +209,20 @@ export default {
   data(){
     const _this = this;
     return {
+      markersGoodsVisible: false,
+      markersGoods: [{
+        id: 1,
+        mapcenter: '114.209927,38.224691',
+        name: '应急物资1',
+        total: 200,
+        color: '#23e610',
+      }, {
+        id: 2,
+        mapcenter: '114.209927,38.221291',
+        name: '应急物资2',
+        total: 20,
+        color: '#dd000e',
+      }],
       audio: new Audio('/audio/alarm.wav'),
       audio_play: false,
       intervalId: null,
@@ -268,6 +305,8 @@ export default {
           this.leftDeviceName = '全部设备';
           this.markersDevice = res.data;
           this.zoom = 6;
+          this.markersDeviceVisible = true;
+          this.markerVisible = false;
         });
     },
     getUserDevices(center) {
@@ -292,6 +331,18 @@ export default {
         },
       };
     },
+    // 应急物资
+    rebuildGoodsEvent(marker) {
+      var mapcenter = marker.mapcenter.replace(/\s*/g, '');
+      const that = this;
+      const position = mapcenter.split(',');
+      return {
+        click(e) {
+          that.zoom = 15;
+          that.center = position;
+        },
+      };
+    },
     markerClickEvent(marker) {
       const that = this;
       return {
@@ -310,6 +361,18 @@ export default {
         });
       this.dataRefresh(uid);
     },
+    // 获取隐患设备
+    getDangerDeviceList() {
+      // 停止定时器
+      this.clearIntv();
+      devices({ devicestatus: 7 })
+        .then(res => {
+          this.markersDevice = res.data;
+          this.markersDeviceVisible = true;
+          this.markerVisible = false;
+        });
+      // this.dataRefresh();
+    },
     // 获取设备详细信息
     getUserDeviceInfo(id) {
       deviceinfo(id)
@@ -507,7 +570,7 @@ export default {
 .toolbar{
   position: fixed;
   top: 120px;
-  right: 40px;
+  right: 100px;
 }
 .zero-user-devices{
   position: fixed;

resources/js/views/sweep-check/index.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
+        <el-form-item label="接单人员">
+          <el-select
+            v-model="formSearch.user_id"
+            style="margin-left: 20px;"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="(item, i) in alarmOrderUsersData"
+              :key="i + '1u'"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="工单号">
+          <el-input v-model="formSearch.order_num" placeholder="输入工单号"></el-input>
+        </el-form-item>
+        <el-form-item label="设备编号">
+          <el-input v-model="formSearch.deviceNum" placeholder="输入完整设备编号"></el-input>
+        </el-form-item>
+        <el-form-item label="工单状态">
+          <el-select
+            v-model="formSearch.state"
+            style="margin-left: 20px;"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="(item,ind) in optionStatus"
+              :key="ind + '2s'"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间">
+          <el-date-picker
+            v-model="formSearch.timeRange"
+            align="right"
+            type="datetimerange"
+            :picker-options="pickerOptions"
+            range-separator="至"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-pagination
+      :current-page="formSearch.page"
+      :page-sizes="[20, 80, 150, 300, 5]"
+      :page-size="formSearch.limit"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="formSearch.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    >
+    </el-pagination>
+    <el-table :key="tableKey" :data="alarmOrders" border fit highlight-current-rows>
+      <el-table-column label="工单号" width="180">
+        <template slot-scope="scope">
+          <span @click="handleCopy(scope.row.order_num,$event)">{{ scope.row.order_num }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="设备编号" width="180">
+        <template slot-scope="scope">
+          <span @click="handleCopy(scope.row.devicenumber,$event)">{{ scope.row.devicenumber }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="接单人" width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="设备名称" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.username }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="位置" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.location }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="报警类型" width="80">
+        <template slot-scope="scope">
+          <span>{{ scope.row.status_name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="工单状态" width="130">
+        <template slot-scope="scope">
+          <span>
+            <el-tag :type="orderStateFilter(scope.row.state, 'type')" effect="dark">{{ orderStateFilter(scope.row.state, 'content') }}</el-tag>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间">
+        <template slot-scope="scope">
+          <span>{{ scope.row.created_at }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="更新时间">
+        <template slot-scope="scope">
+          <span>{{ scope.row.updated_at }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="--" width="140">
+        <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, oindex) in order_step"
+          :key="oindex + '1o'"
+          :title="stepFilter(item.schedule)"
+          :description="item.created_at + item.content"
+          :finish-status="item.finish_status"
+        >
+        </el-step>
+      </el-steps>
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <div class="amap-page-container" style="height: 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.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-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.end_time }}</el-form-item>
+              </el-form>
+            </el-col>
+            <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.updated_at }}</el-form-item>
+                <el-form-item label="接单人">{{ order_content.name }}</el-form-item>
+                <el-form-item label="联系电话">{{ order_content.phone_number }}</el-form-item>
+                <el-form-item label="是否到达现场">{{ isLiveFilter(order_content.is_live) }}</el-form-item>
+                <el-form-item label="是否属实">{{ isVerifiedFilter(order_content.is_verified) }}</el-form-item>
+                <el-form-item label="维修状态">{{ isRepairedFilter(order_content.isrepaired) }}</el-form-item>
+                <el-form-item label="进度">{{ isOrderOneFilter(order_content.isorderone) }}</el-form-item>
+                <el-form-item label="反馈内容">{{ order_content.content }}</el-form-item>
+                <el-form-item size="large">
+                  <el-button type="primary" :disabled="buttonStatus" @click="onSubmitDetail(order_content.id)">确认</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-row>
+          <div class="demo-image">
+            <el-image
+              v-for="(item, index) in order_content.images"
+              :key="index + '1m'"
+              style="width: 100px; height: 100px; margin-right: 10px;"
+              :src="item.path"
+              :preview-src-list="order_content.srcList"
+            >
+            </el-image>
+          </div>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import clip from '@/utils/clipboard';
+import BackToTop from '@/components/BackToTop';
+import { alarmOrderUsers, alarmOrderList, alarmOrderDetail, alarmOrderUpdate } 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 {
+      buttonStatus: true,
+      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,
+        name: '全部',
+      }],
+      formSearch: {
+        order_num: '',
+        deviceNum: '',
+        state: 99,
+        timeRange: null,
+        page: 1,
+        limit: 20,
+        user_id: 0,
+        total: 0,
+      },
+      optionStatus: [{
+        value: 99,
+        label: '全部',
+      }, {
+        value: 0,
+        label: '未接单',
+      }, {
+        value: 1,
+        label: '进行中',
+      }, {
+        value: 2,
+        label: '完成',
+      }, {
+        value: 3,
+        label: '异常终止',
+      }],
+      equipment: [],
+      timer: null,
+      tableKey: 0,
+      value2: undefined,
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [{
+          text: '24小时内',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24);
+            picker.$emit('pick', [start, end]);
+          },
+        },
+        ],
+      },
+      myBackToTopStyle: {
+        right: '50px',
+        bottom: '50px',
+        width: '40px',
+        height: '40px',
+        'border-radius': '4px',
+        'line-height': '45px', // Please keep consistent with height to center vertically
+        background: '#e7eaf1', // The background color of the button
+      },
+    };
+  },
+  created() {
+    this.orderUsers();
+    this.alarmOrdersData();
+  },
+  methods: {
+    onSubmitDetail(id) {
+      const data = {
+        state: 2,
+        isorderone: 4,
+        schedule: JSON.stringify({
+          'schedule': 5, 'content': '恭喜，你的工单完成啦！',
+        }),
+      };
+      alarmOrderUpdate(data, id).then(response => {
+        if (response.code === 200) {
+          this.$message.success('恭喜，你的工单完成啦！');
+          this.dialogTableVisible = false;
+          this.dataSearch();
+        }
+      }).catch(err => {
+        console.log(err);
+      });
+    },
+    isLiveFilter(id) {
+      const steps = [];
+      steps[1] = '到达现场';
+      steps[2] = '未到达现场';
+      return steps[id];
+    },
+    isVerifiedFilter(id) {
+      const steps = [];
+      steps[1] = '属实';
+      steps[2] = '不属实';
+      return steps[id];
+    },
+    isRepairedFilter(id) {
+      const status = [];
+      status[1] = '已修好';
+      status[2] = '未修好';
+      return status[id];
+    },
+    isOrderOneFilter(id) {
+      const steps = [];
+      steps[1] = '开始';
+      steps[2] = '等待';
+      steps[3] = '检修';
+      steps[4] = '完成';
+      steps[5] = '审核通过';
+      return steps[id];
+    },
+    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, type) {
+      const status = [];
+      status[0] = { content: '未接单', type: 'danger' };
+      status[1] = { content: '进行中', type: 'warning' };
+      status[2] = { content: '完成', type: 'success' };
+      status[3] = { content: '异常终止', type: 'info' };
+      status[4] = { content: '已提交未审核', type: 'warning' };
+      if (type === 'type') {
+        return status[state].type;
+      }
+      if (type === 'content') {
+        return status[state].content;
+      }
+    },
+    // 工单详情
+    orderDetail(id) {
+      this.buttonStatus = true;
+      alarmOrderDetail(id).then(response => {
+        const all_steps = [{
+          schedule: 1, content: '', created_at: '', finish_status: 'finish',
+        }, {
+          schedule: 2, content: '', created_at: '', finish_status: 'finish',
+        }, {
+          schedule: 3, content: '', created_at: '', finish_status: 'finish',
+        }, {
+          schedule: 4, content: '', created_at: '', finish_status: 'finish',
+        }, {
+          schedule: 5, content: '', created_at: '', finish_status: 'finish',
+        }];
+        if (response.code === 200) {
+          console.log(response.data);
+          this.order_content = response.data;
+          const srcList = [];
+          for (var key in response.data.images) {
+            srcList.push(response.data.images[key].path);
+          }
+          this.order_content.srcList = srcList;
+          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_content.isorderone === 4) && (this.order_content.state === 4));
+          if ((this.order_content.isorderone === 3) && (this.order_content.state === 4)) {
+            this.buttonStatus = false;
+          }
+          if (response.data.state === 2) {
+            this.order_content.isorderone = 5;
+          }
+          console.log(this.order_step);
+        }
+      }).catch(err => {
+        console.log(err);
+      });
+    },
+    // 可以派单的人员
+    orderUsers(data) {
+      alarmOrderUsers().then(response => {
+        if (response.code === 200) {
+          this.alarmOrderUsersData = this.alarmOrderUsersData.concat(response.data);
+        }
+      }).catch(err => {
+        console.log(err);
+      });
+    },
+    // 工单列表
+    alarmOrdersData() {
+      console.log(this.formSearch);
+      alarmOrderList(this.formSearch).then(response => {
+        if (response.code === 200) {
+          console.log(response.data);
+          this.alarmOrders = response.data.orders;
+          this.formSearch.total = response.data.meta.count;
+        }
+      }).catch(err => {
+        console.log(err);
+      });
+    },
+    handleSizeChange(val) {
+      this.formSearch.limit = val;
+      this.dataSearch();
+    },
+    handleCurrentChange(val) {
+      this.formSearch.page = val;
+      this.dataSearch();
+    },
+    handleCopy(text, event) {
+      clip(text, event);
+    },
+    onSubmit() {
+      this.formSearch.page = 1;
+      this.dataSearch();
+    },
+    dataSearch() {
+      this.alarmOrdersData();
+    },
+    timers() {
+      // this.timer = setInterval(() => {
+      //   this.equipmentlist();
+      // }, 10000);
+    },
+    destroyed() {
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.timer);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.placeholder-container {
+  ul {
+    li {
+      margin: 10px;
+      list-style-type: none;
+    }
+  }
+}
+</style>

resources/js/views/sweep-check/ledger.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
+        <el-form-item label="隐患类型">
+          <el-select
+            v-model="formSearch.type_id"
+            style="margin-left: 20px;"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="(item, i) in optionTypes"
+              :key="i + '1u'"
+              :label="item.type"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="隐患等级">
+          <el-select
+            v-model="formSearch.level_id"
+            style="margin-left: 20px;"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="(item,ind) in optionLevels"
+              :key="ind + 'ls'"
+              :label="item.level"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="区域">
+          <el-select
+            v-model="formSearch.area_id"
+            style="margin-left: 20px;"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="(item,ind) in optionAreas"
+              :key="ind + 'ls'"
+              :label="item.label"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="治疗状态">
+          <el-select
+            v-model="formSearch.state"
+            style="margin-left: 20px;"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="(item,ind) in optionStatus"
+              :key="ind + '2s'"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间">
+          <el-date-picker
+            v-model="formSearch.timeRange"
+            align="right"
+            type="datetimerange"
+            :picker-options="pickerOptions"
+            range-separator="至"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-pagination
+      :current-page="formSearch.page"
+      :page-sizes="[20, 80, 150, 300, 5]"
+      :page-size="formSearch.limit"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="formSearch.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    >
+    </el-pagination>
+    <el-table :key="tableKey" :data="ledgerData" border fit highlight-current-rows>
+      <el-table-column label="ID" width="50">
+        <template slot-scope="scope">
+          <span>{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="具体内容" width="180">
+        <template slot-scope="scope">
+          <span>{{ scope.row.content }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="隐患类型" width="80">
+        <template slot-scope="scope">
+          <span>{{ scope.row.type }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="隐患等级" width="80">
+        <template slot-scope="scope">
+          <span>{{ scope.row.level }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="整改措施" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.measure }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="整改责任主体" width="110">
+        <template slot-scope="scope">
+          <span>{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="发现日期" width="100">
+        <template slot-scope="scope">
+          <span>
+            {{ scope.row.created_at }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="整改日期" width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.updated_at }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户地址" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.address }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户电话" width="140">
+        <template slot-scope="scope">
+          <span>{{ scope.row.phone_number }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" width="100">
+        <template slot-scope="scope">
+          <span>
+            <el-tag :type="ledgerStateFilter(scope.row.state, 'type')" effect="dark">{{ ledgerStateFilter(scope.row.state, 'content') }}</el-tag>
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import clip from '@/utils/clipboard';
+
+export default {
+  data() {
+    return {
+      ledgerData: [],
+      formSearch: {
+        type_id: 0,
+        level_id: 0,
+        state: 0,
+        timeRange: null,
+        page: 1,
+        limit: 20,
+        total: 0,
+      },
+      optionTypes: [{
+        type: '全部',
+        id: 0,
+      }, {
+        type: '管路隐患',
+        id: 1,
+      }, {
+        type: '设备隐患',
+        id: 2,
+      }],
+      optionLevels: [{
+        level: '全部',
+        id: 0,
+      }, {
+        level: '一级',
+        id: 1,
+      }, {
+        level: '二级',
+        id: 2,
+      }, {
+        level: '三级',
+        id: 3,
+      }],
+      optionAreas: [{
+        label: '全部',
+        id: 0,
+      }, {
+        label: '平山县城',
+        id: 1,
+      }, {
+        label: '南甸镇',
+        id: 2,
+      }],
+      optionStatus: [{
+        value: 0,
+        label: '全部',
+      }, {
+        value: 1,
+        label: '未清除',
+      }, {
+        value: 1,
+        label: '已清除',
+      }],
+      tableKey: 0,
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [{
+          text: '24小时内',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24);
+            picker.$emit('pick', [start, end]);
+          },
+        },
+        ],
+      },
+    };
+  },
+  created() {
+    this.ledgerListData();
+  },
+  methods: {
+    ledgerStateFilter(state, type) {
+      const status = [];
+      status[1] = { content: '未清除', type: 'danger' };
+      status[2] = { content: '已清除', type: 'success' };
+      if (type === 'type') {
+        return status[state].type;
+      }
+      if (type === 'content') {
+        return status[state].content;
+      }
+    },
+    // 台账详情
+    ledgerDetail(id) {
+    },
+    // 台账列表
+    ledgerListData() {
+      // console.log(this.formSearch);
+      // alarmOrderList(this.formSearch).then(response => {
+      //   if (response.code === 200) {
+      //     console.log(response.data);
+      //     this.alarmOrders = response.data.orders;
+      //     this.formSearch.total = response.data.meta.count;
+      //   }
+      // }).catch(err => {
+      //   console.log(err);
+      // });
+      this.formSearch.total = 2;
+      const ledgerData = [{
+        id: 1,
+        content: '天然气外管路损坏',
+        type_id: 1,
+        type: '管路隐患',
+        level_id: 2,
+        level: '二级',
+        measure: '更换燃气管道',
+        name: '张三',
+        created_at: '2020-12-20 09:01:29',
+        updated_at: '2020-12-24 19:31:59',
+        address: '石家庄市裕华东路39号',
+        phone_number: '13366786770',
+        state: 1,
+      }];
+      const ledgerData1 = [{
+        id: 2,
+        content: '煤气表损坏',
+        type_id: 2,
+        type: '设备隐患',
+        level_id: 1,
+        level: '一级',
+        measure: '更换煤气表',
+        name: '李四',
+        created_at: '2020-12-20 09:01:29',
+        updated_at: '2020-12-24 19:31:59',
+        address: '石家庄市裕华东路39号-1',
+        phone_number: '15373999156',
+        state: 2,
+      }];
+      this.ledgerData = ledgerData.concat(ledgerData1);
+      if (this.formSearch.type_id === 1) {
+        this.ledgerData = ledgerData;
+      }
+      if (this.formSearch.type_id === 2) {
+        this.ledgerData = ledgerData1;
+      }
+    },
+    handleSizeChange(val) {
+      this.formSearch.limit = val;
+      this.dataSearch();
+    },
+    handleCurrentChange(val) {
+      this.formSearch.page = val;
+      this.dataSearch();
+    },
+    handleCopy(text, event) {
+      clip(text, event);
+    },
+    onSubmit() {
+      this.formSearch.page = 1;
+      this.dataSearch();
+    },
+    dataSearch() {
+      this.ledgerListData();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.placeholder-container {
+  ul {
+    li {
+      margin: 10px;
+      list-style-type: none;
+    }
+  }
+}
+</style>

resources/js/views/sweep-check/record.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
+        <el-form-item label="接单人员">
+          <el-select
+            v-model="formSearch.user_id"
+            style="margin-left: 20px;"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="(item, i) in alarmOrderUsersData"
+              :key="i + '1u'"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="工单号">
+          <el-input v-model="formSearch.order_num" placeholder="输入工单号"></el-input>
+        </el-form-item>
+        <el-form-item label="设备编号">
+          <el-input v-model="formSearch.deviceNum" placeholder="输入完整设备编号"></el-input>
+        </el-form-item>
+        <el-form-item label="工单状态">
+          <el-select
+            v-model="formSearch.state"
+            style="margin-left: 20px;"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="(item,ind) in optionStatus"
+              :key="ind + '2s'"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间">
+          <el-date-picker
+            v-model="formSearch.timeRange"
+            align="right"
+            type="datetimerange"
+            :picker-options="pickerOptions"
+            range-separator="至"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-pagination
+      :current-page="formSearch.page"
+      :page-sizes="[20, 80, 150, 300, 5]"
+      :page-size="formSearch.limit"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="formSearch.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    >
+    </el-pagination>
+    <el-table :key="tableKey" :data="alarmOrders" border fit highlight-current-rows>
+      <el-table-column label="工单号" width="180">
+        <template slot-scope="scope">
+          <span @click="handleCopy(scope.row.order_num,$event)">{{ scope.row.order_num }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="设备编号" width="180">
+        <template slot-scope="scope">
+          <span @click="handleCopy(scope.row.devicenumber,$event)">{{ scope.row.devicenumber }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="接单人" width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="设备名称" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.username }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="位置" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.location }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="报警类型" width="80">
+        <template slot-scope="scope">
+          <span>{{ scope.row.status_name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="工单状态" width="130">
+        <template slot-scope="scope">
+          <span>
+            <el-tag :type="orderStateFilter(scope.row.state, 'type')" effect="dark">{{ orderStateFilter(scope.row.state, 'content') }}</el-tag>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间">
+        <template slot-scope="scope">
+          <span>{{ scope.row.created_at }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="更新时间">
+        <template slot-scope="scope">
+          <span>{{ scope.row.updated_at }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="--" width="140">
+        <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, oindex) in order_step"
+          :key="oindex + '1o'"
+          :title="stepFilter(item.schedule)"
+          :description="item.created_at + item.content"
+          :finish-status="item.finish_status"
+        >
+        </el-step>
+      </el-steps>
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <div class="amap-page-container" style="height: 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.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-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.end_time }}</el-form-item>
+              </el-form>
+            </el-col>
+            <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.updated_at }}</el-form-item>
+                <el-form-item label="接单人">{{ order_content.name }}</el-form-item>
+                <el-form-item label="联系电话">{{ order_content.phone_number }}</el-form-item>
+                <el-form-item label="是否到达现场">{{ isLiveFilter(order_content.is_live) }}</el-form-item>
+                <el-form-item label="是否属实">{{ isVerifiedFilter(order_content.is_verified) }}</el-form-item>
+                <el-form-item label="维修状态">{{ isRepairedFilter(order_content.isrepaired) }}</el-form-item>
+                <el-form-item label="进度">{{ isOrderOneFilter(order_content.isorderone) }}</el-form-item>
+                <el-form-item label="反馈内容">{{ order_content.content }}</el-form-item>
+                <el-form-item size="large">
+                  <el-button type="primary" :disabled="buttonStatus" @click="onSubmitDetail(order_content.id)">确认</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-row>
+          <div class="demo-image">
+            <el-image
+              v-for="(item, index) in order_content.images"
+              :key="index + '1m'"
+              style="width: 100px; height: 100px; margin-right: 10px;"
+              :src="item.path"
+              :preview-src-list="order_content.srcList"
+            >
+            </el-image>
+          </div>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import clip from '@/utils/clipboard';
+import BackToTop from '@/components/BackToTop';
+import { alarmOrderUsers, alarmOrderList, alarmOrderDetail, alarmOrderUpdate } 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 {
+      buttonStatus: true,
+      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,
+        name: '全部',
+      }],
+      formSearch: {
+        order_num: '',
+        deviceNum: '',
+        state: 99,
+        timeRange: null,
+        page: 1,
+        limit: 20,
+        user_id: 0,
+        total: 0,
+      },
+      optionStatus: [{
+        value: 99,
+        label: '全部',
+      }, {
+        value: 0,
+        label: '未接单',
+      }, {
+        value: 1,
+        label: '进行中',
+      }, {
+        value: 2,
+        label: '完成',
+      }, {
+        value: 3,
+        label: '异常终止',
+      }],
+      equipment: [],
+      timer: null,
+      tableKey: 0,
+      value2: undefined,
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [{
+          text: '24小时内',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24);
+            picker.$emit('pick', [start, end]);
+          },
+        },
+        ],
+      },
+      myBackToTopStyle: {
+        right: '50px',
+        bottom: '50px',
+        width: '40px',
+        height: '40px',
+        'border-radius': '4px',
+        'line-height': '45px', // Please keep consistent with height to center vertically
+        background: '#e7eaf1', // The background color of the button
+      },
+    };
+  },
+  created() {
+    this.orderUsers();
+    this.alarmOrdersData();
+  },
+  methods: {
+    onSubmitDetail(id) {
+      const data = {
+        state: 2,
+        isorderone: 4,
+        schedule: JSON.stringify({
+          'schedule': 5, 'content': '恭喜，你的工单完成啦！',
+        }),
+      };
+      alarmOrderUpdate(data, id).then(response => {
+        if (response.code === 200) {
+          this.$message.success('恭喜，你的工单完成啦！');
+          this.dialogTableVisible = false;
+          this.dataSearch();
+        }
+      }).catch(err => {
+        console.log(err);
+      });
+    },
+    isLiveFilter(id) {
+      const steps = [];
+      steps[1] = '到达现场';
+      steps[2] = '未到达现场';
+      return steps[id];
+    },
+    isVerifiedFilter(id) {
+      const steps = [];
+      steps[1] = '属实';
+      steps[2] = '不属实';
+      return steps[id];
+    },
+    isRepairedFilter(id) {
+      const status = [];
+      status[1] = '已修好';
+      status[2] = '未修好';
+      return status[id];
+    },
+    isOrderOneFilter(id) {
+      const steps = [];
+      steps[1] = '开始';
+      steps[2] = '等待';
+      steps[3] = '检修';
+      steps[4] = '完成';
+      steps[5] = '审核通过';
+      return steps[id];
+    },
+    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, type) {
+      const status = [];
+      status[0] = { content: '未接单', type: 'danger' };
+      status[1] = { content: '进行中', type: 'warning' };
+      status[2] = { content: '完成', type: 'success' };
+      status[3] = { content: '异常终止', type: 'info' };
+      status[4] = { content: '已提交未审核', type: 'warning' };
+      if (type === 'type') {
+        return status[state].type;
+      }
+      if (type === 'content') {
+        return status[state].content;
+      }
+    },
+    // 工单详情
+    orderDetail(id) {
+      this.buttonStatus = true;
+      alarmOrderDetail(id).then(response => {
+        const all_steps = [{
+          schedule: 1, content: '', created_at: '', finish_status: 'finish',
+        }, {
+          schedule: 2, content: '', created_at: '', finish_status: 'finish',
+        }, {
+          schedule: 3, content: '', created_at: '', finish_status: 'finish',
+        }, {
+          schedule: 4, content: '', created_at: '', finish_status: 'finish',
+        }, {
+          schedule: 5, content: '', created_at: '', finish_status: 'finish',
+        }];
+        if (response.code === 200) {
+          console.log(response.data);
+          this.order_content = response.data;
+          const srcList = [];
+          for (var key in response.data.images) {
+            srcList.push(response.data.images[key].path);
+          }
+          this.order_content.srcList = srcList;
+          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_content.isorderone === 4) && (this.order_content.state === 4));
+          if ((this.order_content.isorderone === 3) && (this.order_content.state === 4)) {
+            this.buttonStatus = false;
+          }
+          if (response.data.state === 2) {
+            this.order_content.isorderone = 5;
+          }
+          console.log(this.order_step);
+        }
+      }).catch(err => {
+        console.log(err);
+      });
+    },
+    // 可以派单的人员
+    orderUsers(data) {
+      alarmOrderUsers().then(response => {
+        if (response.code === 200) {
+          this.alarmOrderUsersData = this.alarmOrderUsersData.concat(response.data);
+        }
+      }).catch(err => {
+        console.log(err);
+      });
+    },
+    // 工单列表
+    alarmOrdersData() {
+      console.log(this.formSearch);
+      alarmOrderList(this.formSearch).then(response => {
+        if (response.code === 200) {
+          console.log(response.data);
+          this.alarmOrders = response.data.orders;
+          this.formSearch.total = response.data.meta.count;
+        }
+      }).catch(err => {
+        console.log(err);
+      });
+    },
+    handleSizeChange(val) {
+      this.formSearch.limit = val;
+      this.dataSearch();
+    },
+    handleCurrentChange(val) {
+      this.formSearch.page = val;
+      this.dataSearch();
+    },
+    handleCopy(text, event) {
+      clip(text, event);
+    },
+    onSubmit() {
+      this.formSearch.page = 1;
+      this.dataSearch();
+    },
+    dataSearch() {
+      this.alarmOrdersData();
+    },
+    timers() {
+      // this.timer = setInterval(() => {
+      //   this.equipmentlist();
+      // }, 10000);
+    },
+    destroyed() {
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.timer);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.placeholder-container {
+  ul {
+    li {
+      margin: 10px;
+      list-style-type: none;
+    }
+  }
+}
+</style>

resources/js/views/sweep-check/security.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
+        <el-form-item label="模版ID">
+          <el-input v-model="formSearch.template_id" placeholder="输入模版ID"></el-input>
+        </el-form-item>
+        <el-form-item label="安检计划名称">
+          <el-input v-model="formSearch.plan_name" placeholder="输入安检计划名称"></el-input>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select
+            v-model="formSearch.status"
+            placeholder="请选择"
+            width="40"
+          >
+            <el-option
+              v-for="(item,ind) in optionStatus"
+              :key="ind + '2s'"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间">
+          <el-date-picker
+            v-model="formSearch.timeRange"
+            align="right"
+            type="datetimerange"
+            :picker-options="pickerOptions"
+            range-separator="至"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-pagination
+      :current-page="formSearch.page"
+      :page-sizes="[20, 80, 150, 300, 5]"
+      :page-size="formSearch.limit"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="formSearch.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    >
+    </el-pagination>
+    <el-table :data="listData" border fit highlight-current-rows>
+      <el-table-column label="模版ID" width="180">
+        <template slot-scope="scope">
+          <span @click="handleCopy(scope.row.template_id,$event)">{{ scope.row.template_id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="安检计划名称" width="180">
+        <template slot-scope="scope">
+          <span @click="handleCopy(scope.row.plan_name,$event)">{{ scope.row.plan_name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="计划描述" width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.description }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程">
+        <template slot-scope="scope">
+          <el-steps :space="200" :active="1" finish-status="success">
+            <el-step v-for="(item,index) in scope.row.step" :key="index" :title="item.title"></el-step>
+          </el-steps>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" width="90">
+        <template slot-scope="scope">
+          <span>
+            <el-tag :type="statusFilter(scope.row.status, 'type')" effect="dark">{{ statusFilter(scope.row.status, 'content') }}</el-tag>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" width="160">
+        <template slot-scope="scope">
+          <span>{{ scope.row.created_at }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import clip from '@/utils/clipboard';
+
+export default {
+  filters: {
+  },
+  data() {
+    return {
+      listData: [],
+      formSearch: {
+        template_id: '',
+        plan_name: '',
+        status: 0,
+        timeRange: null,
+        page: 1,
+        limit: 20,
+        total: 0,
+      },
+      optionStatus: [{
+        value: 0,
+        label: '全部',
+      }, {
+        value: 1,
+        label: '在建中',
+      }, {
+        value: 2,
+        label: '已完成',
+      }, {
+        value: 3,
+        label: '已派发',
+      }, {
+        value: 4,
+        label: '禁用',
+      }],
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [{
+          text: '24小时内',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24);
+            picker.$emit('pick', [start, end]);
+          },
+        },
+        ],
+      },
+    };
+  },
+  created() {
+    this.listDataApi();
+  },
+  methods: {
+    statusFilter(state, type) {
+      const status = [];
+      status[1] = { content: '在建中', type: 'info' };
+      status[2] = { content: '已完成', type: 'warning' };
+      status[3] = { content: '已派发', type: 'success' };
+      status[4] = { content: '禁用', type: 'danger' };
+      if (type === 'type') {
+        return status[state].type;
+      }
+      if (type === 'content') {
+        return status[state].content;
+      }
+    },
+    // 列表
+    listDataApi() {
+      // console.log(this.formSearch);
+      // alarmOrderList(this.formSearch).then(response => {
+      //   if (response.code === 200) {
+      //     console.log(response.data);
+      //     this.alarmOrders = response.data.orders;
+      //     this.formSearch.total = response.data.meta.count;
+      //   }
+      // }).catch(err => {
+      //   console.log(err);
+      // });
+      this.formSearch.total = 4;
+      const listData = [{
+        template_id: '20201218153501427460',
+        plan_name: '燃气定期巡检1',
+        description: '定期巡检',
+        step: [{
+          step: 1,
+          title: '制定巡检时间',
+        }, {
+          step: 2,
+          title: '选择区域',
+        }, {
+          step: 3,
+          title: '确定巡检人员',
+        }],
+        status: 1,
+        created_at: '2020-12-20 11:04:29',
+      }, {
+        template_id: '20201218153501427461',
+        plan_name: '燃气定期巡检2',
+        description: '定期巡检',
+        step: [{
+          step: 1,
+          title: '制定巡检时间',
+        }, {
+          step: 2,
+          title: '选择区域',
+        }, {
+          step: 3,
+          title: '确定巡检人员',
+        }, {
+          step: 4,
+          title: '反馈信息',
+        }],
+        status: 2,
+        created_at: '2020-12-20 11:04:29',
+      }, {
+        template_id: '20201218153501427462',
+        plan_name: '燃气定期巡检3',
+        description: '定期巡检',
+        step: [{
+          step: 1,
+          title: '制定巡检时间',
+        }, {
+          step: 2,
+          title: '选择区域',
+        }, {
+          step: 3,
+          title: '确定巡检人员',
+        }, {
+          step: 4,
+          title: '巡检内容',
+        }],
+        status: 3,
+        created_at: '2020-12-20 11:04:29',
+      }, {
+        template_id: '20201218153501427463',
+        plan_name: '燃气定期巡检4',
+        description: '定期巡检',
+        step: [{
+          step: 1,
+          title: '制定巡检时间',
+        }, {
+          step: 2,
+          title: '选择区域',
+        }, {
+          step: 3,
+          title: '确定巡检人员',
+        }, {
+          step: 4,
+          title: '反馈信息',
+        }],
+        status: 4,
+        created_at: '2020-12-20 11:04:24',
+      }];
+      this.listData = listData;
+      if (this.formSearch.template_id) {
+        this.listData = [{
+          template_id: '20201218153501427461',
+          plan_name: '燃气定期巡检',
+          description: '定期巡检',
+          step: [{
+            step: 1,
+            title: '制定巡检时间',
+          }, {
+            step: 2,
+            title: '选择区域',
+          }, {
+            step: 3,
+            title: '确定巡检人员',
+          }, {
+            step: 4,
+            title: '反馈信息',
+          }],
+          status: 2,
+          created_at: '2020-12-20 11:04:29',
+        }];
+      }
+    },
+    handleSizeChange(val) {
+      this.formSearch.limit = val;
+      this.dataSearch();
+    },
+    handleCurrentChange(val) {
+      this.formSearch.page = val;
+      this.dataSearch();
+    },
+    handleCopy(text, event) {
+      clip(text, event);
+    },
+    onSubmit() {
+      this.formSearch.page = 1;
+      this.dataSearch();
+    },
+    dataSearch() {
+      this.listDataApi();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.placeholder-container {
+  ul {
+    li {
+      margin: 10px;
+      list-style-type: none;
+    }
+  }
+}
+</style>