Skip to content

L
laravelzh
Commit 7a057cac authored by Administrator's avatar Administrator
Browse files
Options

Merge branch 'release/sweep_check' 

# Conflicts:
#	resources/js/router/index.js
parents 75f7fd11 83ed582f
Pipeline #233 failed with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 1873 additions and 2 deletions
      app/Http/Controllers/DevicesController.php
      View file @ 7a057cac
      ......@@ -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
      View file @ 7a057cac
      ......@@ -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 0 → 100644
      View file @ 7a057cac
      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
      View file @ 7a057cac
      ......@@ -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 0 → 100644
      View file @ 7a057cac
      <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 0 → 100644
      View file @ 7a057cac
      <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 0 → 100644
      View file @ 7a057cac
      <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 0 → 100644
      View file @ 7a057cac
      <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>
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment