|
|
@@ -0,0 +1,607 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="module-container">
|
|
|
+ <el-row>
|
|
|
+ <el-col
|
|
|
+ :span="24"
|
|
|
+ >
|
|
|
+ <el-card class="box-card">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>已关联设备列表</span>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="addItem"
|
|
|
+ >
|
|
|
+ 新增
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="syncDevice"
|
|
|
+ >
|
|
|
+ 同步
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="card-select">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <!-- <el-col
|
|
|
+ :span="4"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="machineForm.projectId"
|
|
|
+ placeholder="选择区域"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ transfer
|
|
|
+ @change="changeProject"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in projectList"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col> -->
|
|
|
+ <el-col
|
|
|
+ :span="4"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="search1.projectId"
|
|
|
+ placeholder="选择项目"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ transfer
|
|
|
+ @change="changeProject"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in projectList"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="6"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="getTableData()"
|
|
|
+ >
|
|
|
+ 搜索
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="reset"
|
|
|
+ >
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData1"
|
|
|
+ :height="resizeHeight - 300"
|
|
|
+ row-class-name="table-row"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="projectName"
|
|
|
+ label="项目名称"
|
|
|
+ width="180"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="channelName"
|
|
|
+ label="设备监控名称"
|
|
|
+ width="180"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="channelNo"
|
|
|
+ label="通道号"
|
|
|
+ width="180"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="deviceSerial"
|
|
|
+ label="设备序列号"
|
|
|
+ width="180"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="createTime"
|
|
|
+ label="创建时间"
|
|
|
+ width="180"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="action"
|
|
|
+ label="操作"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <!-- <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="edit(scope.row,scope.$index)"
|
|
|
+ >
|
|
|
+ 编辑
|
|
|
+ </el-button> -->
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ @click="remove(scope.row,scope.$index)"
|
|
|
+ >
|
|
|
+ 解绑
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ :page-size="search1.pageSize"
|
|
|
+ :current="search1.pageIndex"
|
|
|
+ :total="totalCount"
|
|
|
+ @current-change="changePage"
|
|
|
+ />
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 新增对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="addModel"
|
|
|
+ :title="isAdd ? '新增' : '编辑'"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="projectForm"
|
|
|
+ class="tableForm"
|
|
|
+ :model="projectForm"
|
|
|
+ :rules="rulesAdd"
|
|
|
+ :label-width="100"
|
|
|
+ >
|
|
|
+ <template v-if="flag == 1">
|
|
|
+ <el-form-item
|
|
|
+ label="项目名称"
|
|
|
+ prop="list"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="projectForm.name"
|
|
|
+ placeholder="请输入"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-form-item
|
|
|
+ label="选择项目"
|
|
|
+ prop="list"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="machineForm.projectId"
|
|
|
+ placeholder="选择项目"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ transfer
|
|
|
+ @change="changeProject"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in projectList"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="设备类型"
|
|
|
+ prop="list"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="machineForm.type"
|
|
|
+ placeholder="选择设备类型"
|
|
|
+ filterable
|
|
|
+ transfer
|
|
|
+ @change="changeDeviceType"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in [{value:0,label:'广联达'}, {value:1,label:'萤石云'}]"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="关联设备"
|
|
|
+ prop="list"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="machineForm.cameraDeviceList[0].id"
|
|
|
+ placeholder="选择设备"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ transfer
|
|
|
+ @change="changeDevice"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in machineList"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="监控地点"
|
|
|
+ prop="list"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="machineForm.name"
|
|
|
+ placeholder="请输入"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="设备url"
|
|
|
+ prop="list"
|
|
|
+ >
|
|
|
+ <el-input v-model="machineForm.cameraDeviceList[0].url" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="萤石验证码"
|
|
|
+ prop="list"
|
|
|
+ >
|
|
|
+ <el-input v-model="machineForm.verCode" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="设备名称"
|
|
|
+ prop="list"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="machineForm.cameraDeviceList[0].deviceName"
|
|
|
+ disabled
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="设备序列号"
|
|
|
+ prop="list"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="machineForm.cameraDeviceList[0].deviceSerial"
|
|
|
+ disabled
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="设备url"
|
|
|
+ prop="list"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="machineForm.cameraDeviceList[0].url"
|
|
|
+ disabled
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="addModel = false">取 消</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="doSubmit"
|
|
|
+ >确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ getProjectDictionary
|
|
|
+} from 'api/dictionary'
|
|
|
+import {
|
|
|
+ getCameraProjectPage,
|
|
|
+ syncCamera
|
|
|
+} from 'api/videoManage'
|
|
|
+import { getStore } from '../../utils/store'
|
|
|
+export default {
|
|
|
+ name: 'ProjectList',
|
|
|
+ props: {
|
|
|
+ resizeHeight: {
|
|
|
+ type: Number,
|
|
|
+ default: 300
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ title: '',
|
|
|
+ tableData1: [],
|
|
|
+ tableData2: [{ name: '', createTime: '', projectName: '', typeName: '' }],
|
|
|
+ tableData3: [{ deviceName: '', statusName: '', deviceSerial: '' }],
|
|
|
+ isAdd: false, // 是否是新增
|
|
|
+ addModel: false,
|
|
|
+ projectForm: { id: '', name: '', isDelete: 0 }, // isDelete: 0是编辑；1是解绑
|
|
|
+ machineForm: { name: '', projectId: '', projectName: '', type: null, isDelete: 0, id: '', verCode: '', cameraDeviceList: [{ deviceName: '', deviceSerial: '', id: '', url: '' }] },
|
|
|
+ rulesAdd: {
|
|
|
+ // input: [{ required: true, message: '请输入', trigger: 'blur' }],
|
|
|
+ // list: [{ required: true, message: '请选择', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ search1: { pageIndex: 1, pageSize: 10, projectId: '' },
|
|
|
+ search2: { page: 1, pageSize: 10, name: '', projectId: '' },
|
|
|
+ search3: { page: 1, pageSize: 10, name: '', deviceSerial: '', status: '' },
|
|
|
+ totalCount: 0,
|
|
|
+ projectList: [{ value: '', label: '' }], // 项目下拉选择框
|
|
|
+ machineList: [{ value: '', label: '' }] // 机房下拉选择框
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ flag () {
|
|
|
+ if (this.$route.path == '/videoManage') {
|
|
|
+ return 1
|
|
|
+ } else {
|
|
|
+ return 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init () {
|
|
|
+ this.getProject()
|
|
|
+ this.getTableData()
|
|
|
+ if (this.flag == 2) {
|
|
|
+ this.getMachineListSelectList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getProject () {
|
|
|
+ getProjectDictionary({
|
|
|
+ companyId: getStore({ name: 'companyIdScreen' })
|
|
|
+ }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.projectList = res.data.map(v => ({ value: v.projectId, label: v.projectName }))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTableData () {
|
|
|
+ getCameraProjectPage(this.search1).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.tableData1 = res.data.records
|
|
|
+ this.totalCount = res.data.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ reset () {
|
|
|
+ this.search1.projectId = ''
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ // 清空表单
|
|
|
+ clearForm () {
|
|
|
+ // this.isAdd = false
|
|
|
+ if (!this.isAdd) return
|
|
|
+ // 项目表单
|
|
|
+ if (this.flag == 1) {
|
|
|
+ this.projectForm.id = ''
|
|
|
+ this.projectForm.name = ''
|
|
|
+ this.projectForm.isDelete = 0
|
|
|
+ }
|
|
|
+ // 机房表单
|
|
|
+ if (this.flag == 2) {
|
|
|
+ this.machineForm.name = ''
|
|
|
+ this.machineForm.projectId = ''
|
|
|
+ this.machineForm.projectName = ''
|
|
|
+ this.machineForm.type = null
|
|
|
+ this.machineForm.typeName = ''
|
|
|
+ this.machineForm.id = ''
|
|
|
+ this.machineForm.cameraDeviceList[0].deviceName = ''
|
|
|
+ this.machineForm.cameraDeviceList[0].deviceSerial = ''
|
|
|
+ this.machineForm.cameraDeviceList[0].id = ''
|
|
|
+ this.machineForm.cameraDeviceList[0].url = ''
|
|
|
+ this.machineForm.verCode = ''
|
|
|
+ this.machineForm.isDelete = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取设备下拉选择框
|
|
|
+ getMachineListSelectList () {
|
|
|
+ this.api.getDeviceListbyPage({ page: 1, pageSize: 10000 }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.machineList = res.data.content.map(v => {
|
|
|
+ v.value = v.id
|
|
|
+ v.label = v.deviceName
|
|
|
+ return v
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$Notice.error({
|
|
|
+ title: '获取设备列表失败',
|
|
|
+ desc: res.message
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 新增
|
|
|
+ addItem () {
|
|
|
+ this.addModel = true
|
|
|
+ this.isAdd = true
|
|
|
+ this.clearForm()
|
|
|
+ },
|
|
|
+ // 改变关联设备
|
|
|
+ changeDevice (value) {
|
|
|
+ this.machineList.forEach(v => {
|
|
|
+ if (v.id == value) {
|
|
|
+ this.machineForm.cameraDeviceList[0].deviceName = v.deviceName
|
|
|
+ this.machineForm.cameraDeviceList[0].deviceSerial = v.deviceSerial
|
|
|
+ this.machineForm.cameraDeviceList[0].url = v.url
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 改变项目下拉列表
|
|
|
+ changeProject (value) {
|
|
|
+ this.projectList.forEach(v => {
|
|
|
+ if (v.projectId == value) this.machineForm.projectName = v.projectName
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 改变设备类型
|
|
|
+ changeDeviceType (value) {
|
|
|
+ this.typeName = value ? '萤石云' : '广联达'
|
|
|
+ this.machineForm.cameraDeviceList[0].id = ''
|
|
|
+ if (!value) { // 如果不是萤石，清空一下数据
|
|
|
+ this.machineForm.cameraDeviceList[0].deviceName = ''
|
|
|
+ this.machineForm.cameraDeviceList[0].deviceSerial = ''
|
|
|
+ this.machineForm.cameraDeviceList[0].url = ''
|
|
|
+ this.machineForm.verCode = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 同步萤石设备
|
|
|
+ syncDevice () {
|
|
|
+ syncCamera({}).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: res.msg
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: res.msg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 提交
|
|
|
+ doSubmit () {
|
|
|
+ if (this.flag == 1) {
|
|
|
+ if (this.isAdd) {
|
|
|
+ this.api.saveProject({ name: this.projectForm.name }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '解绑成功!'
|
|
|
+ })
|
|
|
+ this.addModel = false
|
|
|
+ this.getTableData()
|
|
|
+ this.clearForm()
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: res.message
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.api.updateProject(this.projectForm).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.$Message.success('成功')
|
|
|
+ this.addModel = false
|
|
|
+ this.getTableData()
|
|
|
+ this.clearForm()
|
|
|
+ } else {
|
|
|
+ this.$Message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else if (this.flag == 2) {
|
|
|
+ if (this.isAdd) {
|
|
|
+ this.api.saveMachineRoom(this.machineForm).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.$Message.success('成功')
|
|
|
+ this.addModel = false
|
|
|
+ this.getTableData()
|
|
|
+ this.clearForm()
|
|
|
+ } else {
|
|
|
+ this.$Message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.api.updateMachineRoom(this.machineForm).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.$Message.success('成功')
|
|
|
+ this.addModel = false
|
|
|
+ this.getTableData()
|
|
|
+ this.clearForm()
|
|
|
+ } else {
|
|
|
+ this.$Message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 编辑
|
|
|
+ edit (row) {
|
|
|
+ this.addModel = true
|
|
|
+ this.isAdd = false
|
|
|
+ if (this.flag == 1) {
|
|
|
+ this.projectForm.name = row.name
|
|
|
+ this.projectForm.id = row.id
|
|
|
+ this.projectForm.isDelete = 0
|
|
|
+ } else if (this.flag == 2) {
|
|
|
+ // machineForm: {name: '', projectId: '', projectName: '', type:null, isDelete: 0, cameraDeviceList: [{deviceName: '', deviceSerial: '', id: '', url: ''}]},
|
|
|
+ this.machineForm.name = row.name
|
|
|
+ this.machineForm.projectId = row.projectId
|
|
|
+ this.machineForm.projectName = row.projectName
|
|
|
+ this.machineForm.type = row.type
|
|
|
+ this.machineForm.typeName = row.type ? '萤石云' : '广联达'
|
|
|
+ this.machineForm.id = row.id
|
|
|
+ this.machineForm.cameraDeviceList[0].deviceName = row.cameraDeviceList[0].deviceName
|
|
|
+ this.machineForm.cameraDeviceList[0].deviceSerial = row.cameraDeviceList[0].deviceSerial
|
|
|
+ this.machineForm.cameraDeviceList[0].id = row.cameraDeviceList[0].id
|
|
|
+ this.machineForm.cameraDeviceList[0].url = row.cameraDeviceList[0].url
|
|
|
+ this.machineForm.verCode = row.verCode
|
|
|
+ this.machineForm.isDelete = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 解绑
|
|
|
+ remove (row) {
|
|
|
+ this.isAdd = false
|
|
|
+ if (this.flag == 1) {
|
|
|
+ this.projectForm.name = row.name
|
|
|
+ this.projectForm.id = row.id
|
|
|
+ this.projectForm.isDelete = 1
|
|
|
+ } else if (this.flag == 2) {
|
|
|
+ this.machineForm = row
|
|
|
+ this.machineForm.isDelete = 1
|
|
|
+ }
|
|
|
+ this.$confirm('确定解绑设备？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.doSubmit()
|
|
|
+ }).catch(() => {
|
|
|
+ this.clearForm()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 改变页码
|
|
|
+ changePage (i) {
|
|
|
+ this.search1.pageIndex = i
|
|
|
+ this.getTableData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .box-card {
|
|
|
+ margin-top: 10px;
|
|
|
+ background: none;
|
|
|
+ .card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color:#63d5ff;
|
|
|
+ }
|
|
|
+ .card-select {
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-row {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ // :v-deep.el-table, .el-table__expanded-cell{
|
|
|
+ // background: none
|
|
|
+ // }
|
|
|
+</style>
|
zhaoxw