canvasScreen_admin/src/views/device/index.vue

<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>
           <!-- @keyup.enter.native="crud.toQuery" -->
          <div class="form_item">
            <span>设备ID：</span>
            <el-input
              v-model="query.device_id"
              clearable
              size="small"
              placeholder="请输入设备ID"
              style="width: 200px"
              class="filter-item" 
              @keyup.enter.native='queryDevice(query.device_id)'
            />
          </div>
          <div class="form_item">
            <span>设备名称：</span>
            <el-input
              v-model="query.name"
              clearable
              size="small"
              placeholder="请输入设备名称"
              style="width: 200px"
              class="filter-item"        
            />
          </div>
        </el-col>
        <el-col class="page_add" :span="4">
          <el-button class="table_add clear_btn" plain disabled>清空</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- table -->
    <el-row :gutter="15">
      <el-col>
        <el-table
          style="width: 100%;"
          :data="deviceList"
          :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="device_id" label="设备ID" align="center" />
          <el-table-column prop="device_account" label="设备账号" align="center" />
          <el-table-column prop="device_name" label="设备名称" align="center" />
          <el-table-column label="设备方向" align="center" >
          <template slot-scope="{row}">
              <div>{{row.device_direction ? '竖屏' : '横屏' }}</div>
            </template>
            </el-table-column>
          <el-table-column prop="organ_name" 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="create_time" label="创建时间" align="center" width="160" />
          <el-table-column fixed="right" label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button
                type="primary"
                class="edit_btn"
                @click="editFormData(scope.row)"
              >编辑</el-button>
              <el-button type="danger" class="record_btn" @click="recordData(scope.$index, scope.row)">记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 编辑设备 -->
    <div class="layer">
      <el-dialog
        :title="dialogTitle"
        :close-on-click-modal="false"
        :show-close="false"
        :visible.sync="addFromVisible"
        width="576px"
      >
        <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 />
          </el-form-item>
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="设备方向" prop="orientation">
            <el-select v-model="form.orientation" size="small" class="filter-item">
              <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 type="primary" round @click="submitForm('form')">确 定</el-button>
          <el-button round @click="addFromVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>

    <div class="publish_layer">
      <el-dialog
        title="发布内容"
        :close-on-click-modal="false"
        :visible.sync="contentVisible"
        width="970px"
        height="590px"
      >
        <div class="content_warp">
          <h4>图片</h4>
          <ul class="item_list">
            <li class="item_cont">
              <img src="@/assets/images/background.jpg" alt />
              <div class="item_format">
                <span class="item_type">JPG</span>
              </div>
              <div class="file_name">人工智能</div>
            </li>
          </ul>
          <h4>视频</h4>
          <ul class="item_list">
            <li class="item_cont">
              <img src="@/assets/images/background.jpg" alt />
              <div class="item_format">
                <span class="item_type">Video</span>
                <span class="item_time">03:00</span>
              </div>
              <div class="file_name">防控疫情小贴士</div>
            </li>
          </ul>
          <h4>音频</h4>
          <ul class="item_list">
            <li class="item_cont">
              <div class="radio_img"></div>
              <div class="item_format">
                <span class="item_type">Video</span>
                <span class="item_time">03:00</span>
              </div>
              <div class="file_name">防控疫情小贴士</div>
            </li>
          </ul>
        </div>
      </el-dialog>
    </div>

    <!-- 记录 -->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="recordVisible"
      title="记录"
      class="record_layer"
      width="750px"
    >
      <el-table :data="recordData">
        <el-table-column property="name" label="操作人" />
        <el-table-column property="permissionType" label="角色权限" />
        <el-table-column property="account" label="登录账号" />
        <el-table-column property="type" label="操作类型" />
        <el-table-column property="date" label="操作时间" />
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { ReqDeviceEdit } from '@/api/device/deviceList.js'
import {mapState} from 'vuex'
import {parseTime} from '@/utils/index.js'
export default {
  name: 'Device',
  data() {
    return {   
      page:'1',
      size:'3', 
      // device_id:'',
      dialogTitle: '',
      // 编辑的对话框
      addFromVisible: false,
      contentVisible: false,
      recordVisible: false,
   
      stateData: [{ key: '0', name: '全部' }, { key: '1', name: '在线' }, { key: '2', name: '离线' }],
      deviceData: [{ key: '0', name: '竖屏' }, { key: '1', name: '横屏' }],
      query:{
        state:null,
        name:null,
        device_id:'',
      },
      form: {
       account: null,
       name: null,
       orientation: null,
       device_id:'',
       orga_id:''
     },
      rules: {
        name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }],
        orientation: [{ required: true, message: '请选择设备方向', trigger: 'change' }]
      }
    }
  },
  watch: {},
  mounted(){
     this.getDevice()
  },
  computed:{
     ...mapState({
       deviceList:(state)=>state.device.deviceList
     })
  },
  methods: {
    // 获取设备列表的数据
    getDevice(){  
      const{page,size}=this
      this.$store.dispatch('getDeviceList',{page,size}) 
    },
    // 编辑
    editFormData(row) {
      this.addFromVisible = true
      this.form.account = row.device_account
      this.form.name=row.device_name
      this.form.orientation=row.device_direction ? '竖屏' : '横屏' 
      this.form.device_id=row.device_id     
      // console.log(id)
      // ReqDeviceEdit(params).then(res => {
      //   console.log(res)
      // })
    },
    recordData(index, row) {
      this.recordVisible = true
    },
    // 查看
    handleClick(row) {
      console.log(row)
      this.contentVisible = true
    },
    // 修改设备信息并提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
       const params = {
        account:this.form.account,
        device_name:this.form.name,
        device_direction:this.form.orientation, 
        device_id:this.form.device_id
      }
      // console.log(account,device_name,device_direction)
      console.log(params)
      ReqDeviceEdit(params).then(res => {
        console.log(res)
      })
        } else { 
          console.log('error submit!!')
          return false
        }
      })
    },
    // 查询设备
    queryDevice(id){
      const params={
        device_id:id
      }
      ReqQueryDevice(params).then(res=>{
        console.log(res)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.clear_btn {
  color: #3a8aeb;
  border-color: #3a8aeb;
}
.publish_layer {
  ::v-deep .el-dialog__body {
    padding: 0 20px 30px 20px;
    height: 590px;
    overflow-y: auto;
  }
}
.content_warp {
  padding-top: 16px;
  h4 {
    margin: 6px 0 16px 0;
    font-size: 16px;
    color: #333;
  }
}
</style>