设备管理

src/views/device/index.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索栏 -->
+    <div class="head-container">
+      <el-row type="flex">
+        <el-col :span="20" class="col_flex">
+          <div class="form_item">
+            <span>状态</span>
+            <el-select v-model="query.state" size="small" class="filter-item" style="width: 120px">
+              <el-option v-for="item in stateData" :key="item.key" :label="item.name" :value="item.key" />
+            </el-select>
+          </div>
+          <div class="form_item">
+            <span>设备ID</span>
+            <el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
+          </div>
+          <div class="form_item">
+            <span>设备名称</span>
+            <el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
+          </div>
+          <rrOperation />
+        </el-col>
+        <el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-delete" disabled>清空</el-button></el-col>
+      </el-row>
+    </div>
+    <el-row :gutter="15">
+      <el-col>
+        <el-card class="box-card" shadow="never">
+          <el-table style="width: 100%;" :data="tableData">
+            <el-table-column :selectable="checkboxT" type="selection" width="55" />
+            <el-table-column prop="id" label="设备ID" align="center" />
+            <el-table-column prop="account" label="设备账号" align="center" />
+            <el-table-column prop="name" label="设备名称" align="center" />
+            <el-table-column prop="orientation" label="设备方向" align="center" />
+            <el-table-column prop="organization" label="所属机构" align="center" />
+            <el-table-column prop="isDel" label="设备状态" align="center">
+              <template slot-scope="scope">
+                <div>{{ scope.row.isDel ? '在线' : '离线' }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="content" label="发布内容" align="center">
+              <template slot-scope="scope">
+                <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column prop="date" label="创建时间" align="center" width="200" />
+            <el-table-column fixed="right" label="操作" align="center">
+              <template slot-scope="scope">
+                <el-button type="primary" icon="el-icon-edit" @click="edit(scope.$index, scope.row)" />
+                <el-button type="info" icon="el-icon-info" />
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--分页组件-->
+          <pagination />
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 编辑设备 -->
+    <div class="layer">
+      <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="addFromVisible" width="400px">
+        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+          <el-form-item label="设备账号" prop="account"><el-input v-model="form.account" autocomplete="off" disabled style="width: 200px" /></el-form-item>
+          <el-form-item label="设备名称" prop="name"><el-input v-model="form.name" style="width: 200px" /></el-form-item>
+          <el-form-item label="设备方向" prop="orientation">
+            <el-select v-model="form.orientation" size="small" class="filter-item" style="width: 200px">
+              <el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item.key" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="addFromVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+
+    <div class="layer">
+      <el-dialog title="发布内容" :close-on-click-modal="false" :visible.sync="contentVisible" width="720px">
+        <div class="content_warp">
+          <h4>图片</h4>
+          <ul class="item_list">
+            <li class="item_cont">
+              <img src="../../assets/images/background.jpg" alt="">
+              <div class="item_info">
+                <div class="item_format">
+                  <span class="item_type">JPG</span>
+                  <span class="item_time">30S</span>
+                </div>
+                <p class="item_name">1.3X2DD244</p>
+              </div>
+              <!-- 视频 -->
+              <div class="item_player">1</div>
+            </li>
+          </ul>
+          <h4>视频</h4>
+          <h4>音频</h4>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import crudUser from '@/api/system/user'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import pagination from '@crud/Pagination'
+const defaultForm = {
+  account: null,
+  name: null,
+  orientation: null
+}
+export default {
+  name: 'Device',
+  components: { rrOperation, pagination },
+  cruds() {
+    return CRUD({
+      title: '用户',
+      url: 'api/users',
+      crudMethod: { ...crudUser }
+    })
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      dialogTitle: '',
+      addFromVisible: false,
+      contentVisible: false,
+      tableData: [
+        {
+          id: 'XXXXXXXXX',
+          account: '13476289682',
+          name: 'GCXR2',
+          orientation: '竖屏',
+          organization: 'xx图书馆',
+          content: '',
+          date: '2021-09-14 16:35'
+        }
+      ],
+      stateData: [{ key: '0', name: '全部' }, { key: '1', name: '在线' }, { key: '2', name: '离线' }],
+      deviceData: [{ key: '0', name: '竖屏' }, { key: '1', name: '横屏' }],
+      rules: {
+        name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }],
+        orientation: [{ required: true, message: '请选择设备方向', trigger: 'change' }]
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    // 编辑
+    edit(index, row) {
+      this.dialogTitle = '编辑设备'
+      this.addFromVisible = true
+      this.form.account = row.account
+      this.form.name = row.name
+    },
+    // 查看
+    handleClick(row) {
+      console.log(row)
+      this.contentVisible = true
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.col_flex {
+  display: flex;
+}
+.layer {
+  ::v-deep .el-dialog__body {
+    padding: 0 0 30px 20px;
+  }
+}
+.item_list {
+  display: flex;
+  flex-wrap: wrap;
+  .item_cont {
+    position: relative;
+    width: 160px;
+    height: 100px;
+    overflow: hidden;
+    background-color: #f1f1f1;
+    margin: 0 10px 10px 0;
+    img {
+      display: block;
+      width: 160px;
+      height: 100px;
+    }
+    .item_info {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      .item_format {
+        display: flex;
+        span {
+          display: block;
+          padding: 2px 5px;
+          margin-right: 5px;
+          background: rgba(255, 255, 255, 0.5);
+          color: #fff;
+          font-size: 12px;
+          line-height: 12px;
+          border-radius: 4px;
+        }
+      }
+      .item_name {
+        padding: 2px 0;
+        margin: 5px 0 0 0;
+        background: rgba(255, 255, 255, 0.5);
+        color: #fff;
+      }
+    }
+    .item_player {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 50px;
+      height: 50px;
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 50%;
+      margin: -25px 0 0 -25px;
+      z-index: 999;
+    }
+  }
+}
+</style>