white-board-manage/src/views/admin/device/index.vue

<template>
  <div class="dashboard-container">
    <div class="demo-input-size">
      <el-input
        v-model="deviceCode"
        size="mini"
        placeholder="请输入设备编号"
      />
      <el-input
        v-model="deviceType"
        size="mini"
        placeholder="请输入设备型号"
      />
      <el-input
        v-model="region"
        size="mini"
        placeholder="请输入设备地区"
      />
      <el-input
        v-model="address"
        size="mini"
        placeholder="请输入设备地址"
      />
      <el-date-picker
        v-model="gmtCreated"
        size="mini"
        type="daterange"
        range-separator="至"
        start-placeholder="设备安装开始日期"
        end-placeholder="设备安装结束日期"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd"
      />
      <el-button type="primary" size="mini" style="float: right;" @click="search">查询</el-button>
    </div>
    <div v-show="type === '2' || type === '1,2' || type === '2,1'">
      <el-table
        :data="deviceData"
        style="width: 100%"
      >
        <el-table-column
          label="设备安装时间"
          prop="gmtCreated"
        />
        <el-table-column
          label="设备编号"
          prop="deviceCode"
        />
        <el-table-column
          label="设备尺寸"
          prop="deviceSize"
        />
        <el-table-column
          label="设备型号"
          prop="deviceType"
        />
        <el-table-column
          label="设备地区"
          prop="region"
        />
        <el-table-column
          label="设备地址"
          prop="address"
        />
        <el-table-column
          label="状态"
        >
          <template slot-scope="scope">
            <span>
              {{ scope.row.status === 'UNNORMAL' ? '不正常' : '正常' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              style="float: left; margin: 0 10px 0 0;"
              @click="handleMaintainMessage(scope.$index, scope.row)"
            >
              维护信息
            </el-button>
            <el-button
              v-show="scope.row.status === 'UNNORMAL'"
              size="mini"
              style="float: left; margin: 0 10px 0 0;"
              type="danger"
              @click="handleMaintain(scope.$index, scope.row)"
            >
              立即维护
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="type === '0'">
      <el-table
        :data="deviceData"
        style="width: 100%"
      >
        <el-table-column
          label="设备安装时间"
          prop="gmtCreated"
        />
        <el-table-column
          label="设备编号"
          prop="deviceCode"
        />
        <el-table-column
          label="设备尺寸"
          prop="deviceSize"
        />
        <el-table-column
          label="设备型号"
          prop="deviceType"
        />
        <el-table-column
          label="设备地区"
          prop="region"
        />
        <el-table-column
          label="设备地址"
          prop="address"
        />
        <el-table-column
          align="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              style="float: left; margin: 0 10px 0 0;"
              @click="handleInstall(scope.$index, scope.row)"
            >
              安装信息
            </el-button>
            <el-button
              size="mini"
              style="float: left; margin: 0 10px 0 0;"
              @click="handleMaintainMessage(scope.$index, scope.row)"
            >
              维护信息
            </el-button>
            <el-button
              size="mini"
              style="float: left; margin: 0 10px 0 0;"
              @click="handleUse(scope.$index, scope.row)"
            >
              使用日志
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="gridTile" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          v-for="item in information"
          :key="item.label"
          :label="item.label"
          :prop="item.type"
        />
      </el-table>
    </el-dialog>
    <el-dialog
      title="安装信息"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <div class="install">
        安装日期: {{ gridInstallData.length > 0 ? gridInstallData[0].deviceLog.gmtCreated : '' }}
      </div>
      <div class="install">
        安装人员: {{ gridInstallData.length > 0 ? gridInstallData[0].deviceModifier.name : '' }}
      </div>
      <div class="install">
        安装地区: {{ gridInstallData.length > 0 ? gridInstallData[0].device.region : '' }}
      </div>
      <div class="install">
        安装地址: {{ gridInstallData.length > 0 ? gridInstallData[0].device.address : '' }}
      </div>
      <div class="install">
        备注信息: {{ gridInstallData.length > 0 ? gridInstallData[0].deviceLog.description : '' }}
      </div>
    </el-dialog>
    <el-dialog title="立即维护" :visible.sync="dialogFormVisible">
      <el-form :model="solveForm" label-width="80px">
        <el-form-item label="解决方案">
          <el-input v-model="solveForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handSolve">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken, getType } from '@/utils/auth'

export default {
  name: 'Device',
  data() {
    return {
      dialogTableVisible: false,
      dialogVisible: false,
      gridData: [],
      gridInstallData: [],
      gridTile: '',
      type: getType(),
      uid: getToken(),
      information: [],
      deviceCode: '',
      deviceType: '',
      region: '',
      address: '',
      gmtCreated: '',
      dialogFormVisible: false,
      solveForm: {
        deviceCode: '',
        deviceId: '',
        opType: 'MODIFIED',
        description: '',
        status: 'NORMAL'
      }
    }
  },
  computed: {
    ...mapGetters(['deviceData'])
  },
  created() {
    if (this.type.indexOf('2') !== -1) {
      this.$store.dispatch('admin/getDeviceData', {
        modifier: this.uid
      })
    } else {
      this.$store.dispatch('admin/getDeviceData')
    }
  },
  methods: {
    search() {
      console.log(this.gmtCreated)
      const startTime = this.gmtCreated ? this.gmtCreated[0] : ''
      const endTime = this.gmtCreated ? this.gmtCreated[1] : ''
      if (this.type === '2' || this.type === '1,2' || this.type === '2,1') {
        this.$store.dispatch('admin/getDeviceData', {
          deviceCode: this.deviceCode,
          deviceType: this.deviceType,
          region: this.region,
          address: this.address,
          startTime,
          endTime,
          modifier: this.uid
        })
      } else {
        this.$store.dispatch('admin/getDeviceData', {
          deviceCode: this.deviceCode,
          deviceType: this.deviceType,
          region: this.region,
          address: this.address,
          startTime,
          endTime
        })
      }
    },
    handleInstall(index, row) {
      this.$store.dispatch('admin/queryLogData', {
        deviceId: row.id,
        deviceCode: row.deviceCode,
        opType: 'INSTALL'
      }).then(() => {
        this.gridInstallData = this.$store.getters.logData
        this.dialogVisible = true
      })
    },
    handleMaintainMessage(index, row) {
      this.$store.dispatch('admin/queryLogData', {
        deviceId: row.id,
        deviceCode: row.deviceCode,
        opType: 'MODIFIED'
      }).then(() => {
        this.gridData = this.$store.getters.logData
        this.gridTile = '维护信息'
        this.information = [{
          label: '报修日期',
          type: 'deviceLog[gmtCreated]'
        }, {
          label: '维护人员',
          type: 'deviceModifier[name]'
        }, {
          label: '解决日期',
          type: 'deviceLog[gmtCreated]'
        }, {
          label: '维护状态',
          type: 'deviceLog[status]'
        }, {
          label: '解决方案',
          type: 'deviceLog[description]'
        }]
        this.dialogTableVisible = true
      })
    },
    handleMaintain(index, row) {
      this.solveForm.deviceCode = row.deviceCode
      this.solveForm.deviceId = row.id
      this.dialogFormVisible = true
    },
    handleUse(index, row) {
      console.log(index, row)
      this.$store.dispatch('admin/queryLogData', {
        deviceId: row.id,
        deviceCode: row.deviceCode,
        opType: 'USE'
      }).then(() => {
        this.gridData = this.$store.getters.logData
        this.gridTile = '使用日志'
        this.information = [{
          label: '设备连接时间',
          type: 'deviceLog[gmtCreated]'
        }, {
          label: '设备连接用户',
          type: 'deviceLog[mobile]'
        }]
        this.dialogTableVisible = true
      })
      // this.gridData = []
      // this.gridData.push(row)
      // this.gridTile = '使用日志'
      // this.dialogTableVisible = true
    },
    handSolve() {
      this.$store.dispatch('admin/addDeviceLogMaintain', this.solveForm)
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-input {
  width: auto;
}
.install {
  margin-bottom: 10px;
}
</style>