工单列表

resources/js/router/index.js

@@ -25,6 +25,7 @@ import usersRoutes from './modules/users';
 import historyRoutes from './modules/history.js';
 import monitorRoutes from './modules/monitor.js';
 import userdeviceRoutes from './modules/userdevice';
+import alarmOrderRoutes from './modules/alarm-order';
 
 /**
  * Sub-menu only appear when children.length>=1
@@ -155,6 +156,7 @@ export const asyncRoutes = [
   usersRoutes,
   adminRoutes,
   userdeviceRoutes,
+  alarmOrderRoutes,
   // {
   //   path: '/userdevice',
   //   component: Layout,

resources/js/router/modules/alarm-order.js

+import Layout from '@/layout';
+
+const alarmOrderRoutes = {
+  path: '/alarm-order',
+  component: Layout,
+  redirect: '/alarm-order/index',
+  name: 'users',
+  alwaysShow: true,
+  meta: {
+    title: '工单管理',
+    icon: 'nested',
+    permissions: ['view menu admin'],
+  },
+  children: [
+    {
+      path: 'index',
+      component: () => import('@/views/alarm-order/index'),
+      name: 'AlarmOrder',
+      meta: { title: '抢险工单', icon: 'nested', permissions: ['manage admin'] },
+    },
+  ],
+};
+export default alarmOrderRoutes;

resources/js/views/alarm-order/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 in alarmOrderUsersData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </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.deviceStatus"
+            style="margin-left: 20px;"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in optionStatus"
+              :key="item.value"
+              :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]"
+      :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="209">
+        <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="209">
+        <template slot-scope="scope">
+          <span @click="handleCopy(scope.row.devicenumber,$event)">{{ scope.row.devicenumber }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="接单人" width="140">
+        <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="130">
+        <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=" scope.row.state==1 ? 'success' : 'warning' " effect="dark">{{ orderStateFilter(scope.row.state) }}</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>
+    <el-tooltip placement="top" content="tooltip">
+      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import clip from '@/utils/clipboard';
+import BackToTop from '@/components/BackToTop';
+import { alarmOrderUsers, alarmOrderList } from '@/api/alarmOrder';
+export default {
+  components: { BackToTop },
+  data() {
+    return {
+      alarmOrders: [],
+      alarmOrderUsersData: [],
+      formSearch: {
+        deviceNum: '',
+        state: 0,
+        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: {
+    orderStateFilter(state) {
+      const status = [];
+      status[0] = '未接单';
+      status[1] = '进行中';
+      status[2] = '完成';
+      status[3] = '异常终止';
+      return status[state];
+    },
+    // 可以派单的人员
+    orderUsers(data) {
+      alarmOrderUsers().then(response => {
+        if (response.code === 200) {
+          this.alarmOrderUsersData = response.data;
+        }
+      }).catch(err => {
+        console.log(err);
+      });
+    },
+    // 工单列表
+    alarmOrdersData() {
+      alarmOrderList(this.formSearch).then(response => {
+        if (response.code === 200) {
+          console.log(response.data);
+          this.alarmOrders = response.data;
+        }
+      }).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>