安检计划页面

resources/js/router/index.js

@@ -26,6 +26,7 @@ import historyRoutes from './modules/history.js';
 import monitorRoutes from './modules/monitor.js';
 import userdeviceRoutes from './modules/userdevice';
 import alarmOrderRoutes from './modules/alarm-order';
+import sweepCheckRoutes from './modules/sweep-check';
 
 /**
  * Sub-menu only appear when children.length>=1
@@ -157,6 +158,7 @@ export const asyncRoutes = [
   adminRoutes,
   userdeviceRoutes,
   alarmOrderRoutes,
+  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/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>