291 lines
8.4 KiB
Vue
291 lines
8.4 KiB
Vue
<template>
|
|
<div>
|
|
<el-form label-width="100px">
|
|
<el-row>
|
|
<el-col :span="4">
|
|
<el-form-item label="关键词">
|
|
<el-input v-model="KEYWORDS" placeholder="盒子名称"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-form-item label="创建人">
|
|
<el-input v-model="CREATOR" placeholder="创建人"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="创建时间">
|
|
<el-date-picker
|
|
v-model="dates"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
style="width: 80%;"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-form-item label-width="10px">
|
|
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
|
搜索
|
|
</el-button>
|
|
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
|
重置
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<el-table
|
|
v-loading="listLoading"
|
|
:data="varList"
|
|
:header-cell-style="{
|
|
'font-weight': 'bold',
|
|
'color': '#000'
|
|
}"
|
|
tooltip-effect="dark"
|
|
border
|
|
fit
|
|
highlight-current-row
|
|
>
|
|
<el-table-column type="index" label="序号" width="50" align="center" />
|
|
<el-table-column prop="AIBOX_NAME" label="盒子名称" align="center"/>
|
|
<el-table-column prop="PROMISE_NAME" label="创建企业" align="center">
|
|
<template slot-scope="{row}">
|
|
<span v-if="row.CORP_NAME != null">{{ row.CORP_NAME }} </span>
|
|
<span v-else>秦皇岛港股份有限公司</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="CREATOR_NAME" label="创建人" align="center"/>
|
|
<el-table-column prop="CREATE_TIME" label="创建时间" align="center"/>
|
|
<el-table-column prop="STATE" label="设备状态" align="center">
|
|
<template slot-scope="{row}">
|
|
{{ row.STATE === '0' ? '离线' : '在线' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="CAPACITY" label="视频数/总容量" align="center">
|
|
<template slot-scope="{row}">
|
|
{{ row.setCount + '/' + row.CAPACITY }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="420">
|
|
<template slot-scope="{row}">
|
|
<el-button type="primary" icon="el-icon-s-tools" size="mini" @click="handleEdit(row)">查看</el-button>
|
|
<el-button v-if="edit && row.STATE === '1'" style="background-color: grey; color: white" type="Info" icon="el-icon-error" plain @click="handleOnline(row.AIBOX_ID,0)">离线</el-button>
|
|
<el-button v-if="edit && row.STATE === '0'" style="background-color: seagreen; color: white" type="info" icon="el-icon-success" plain @click="handleOnline(row.AIBOX_ID,1)">上线</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="page-btn-group">
|
|
<div/>
|
|
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
|
import { requestFN } from '@/utils/request'
|
|
import waves from '@/directive/waves' // waves directive
|
|
import TiandiMap from '../../../../components/TianMap/TiandiMap'
|
|
|
|
export default {
|
|
components: { Pagination, TiandiMap },
|
|
directives: { waves },
|
|
data() {
|
|
return {
|
|
listLoading: true,
|
|
listQuery: {
|
|
page: 1,
|
|
limit: 20
|
|
},
|
|
add: '',
|
|
del: '',
|
|
edit: '',
|
|
total: 0,
|
|
KEYWORDS: '',
|
|
CREATOR: '',
|
|
dates: [],
|
|
varList: [],
|
|
corpinfoAllList: [],
|
|
capacityList: [{ name: '4', value: 4 }, { name: '8', value: 8 }, { name: '12', value: 12 }],
|
|
addForm: {
|
|
dialogType: 'add', // 增or改
|
|
dialogVisible: false,
|
|
rules: {
|
|
AIBOX_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
|
CAPACITY: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
|
},
|
|
info: {
|
|
AIBOX_NAME: '',
|
|
CAPACITY: '',
|
|
CORPINFO_ID: ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getCoroInfoAll()
|
|
this.getList()
|
|
this.hasButton()
|
|
},
|
|
methods: {
|
|
handleOnline(AIBOX_ID, STATE) {
|
|
requestFN(
|
|
'/aibox/edit',
|
|
{
|
|
AIBOX_ID: AIBOX_ID,
|
|
STATE: STATE
|
|
}
|
|
).then((data) => {
|
|
this.$message.success('保存成功')
|
|
this.getList()
|
|
this.addForm.dialogVisible = false
|
|
}).catch((e) => {
|
|
})
|
|
},
|
|
getCoroInfoAll() {
|
|
requestFN(
|
|
'/corpinfo/listSelect',
|
|
{ }
|
|
).then((data) => {
|
|
this.corpinfoAllList = data.list
|
|
}).catch((e) => {
|
|
})
|
|
},
|
|
// 搜索
|
|
getQuery() {
|
|
this.getList()
|
|
},
|
|
// 搜索
|
|
getReset() {
|
|
this.KEYWORDS = ''
|
|
this.dates = []
|
|
this.CREATOR = ''
|
|
this.listQuery = {
|
|
page: 1,
|
|
limit: 20
|
|
}
|
|
this.total = 0
|
|
this.getQuery()
|
|
},
|
|
// 获取列表
|
|
getList() {
|
|
this.listLoading = true
|
|
requestFN(
|
|
'/aibox/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
|
{
|
|
KEYWORDS: this.KEYWORDS,
|
|
CREATOR: this.CREATOR,
|
|
START_TIME: this.dates && this.dates[0],
|
|
END_TIME: this.dates && this.dates[1]
|
|
}
|
|
).then((data) => {
|
|
this.listLoading = false
|
|
this.varList = data.varList
|
|
this.total = data.page.totalResult
|
|
}).catch((e) => {
|
|
this.listLoading = false
|
|
})
|
|
},
|
|
goView(AIBOX_ID) {
|
|
requestFN(
|
|
'/aibox/goEdit',
|
|
{
|
|
AIBOX_ID
|
|
}
|
|
).then((data) => {
|
|
this.dialog.data = { ...data.varList, COVERPEOPLE: 'XXX' }
|
|
this.dialog.visible = true
|
|
})
|
|
},
|
|
handleDelete(id) {
|
|
this.$confirm('确定要删除吗?', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.listLoading = true
|
|
requestFN(
|
|
'/aibox/delete',
|
|
{
|
|
AIBOX_ID: id
|
|
}
|
|
).then((data) => {
|
|
if (data.result === 'success') {
|
|
this.$message({
|
|
message: '删除成功',
|
|
type: 'success'
|
|
})
|
|
} else {
|
|
this.$message.error(data.msg)
|
|
}
|
|
this.listLoading = false
|
|
this.varList = []
|
|
this.listQuery.page = 1
|
|
this.getList()
|
|
}).catch((e) => {
|
|
this.listLoading = false
|
|
})
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
confirm() {
|
|
this.$refs.addForm.validate(valid => {
|
|
if (valid) {
|
|
requestFN(
|
|
'/aibox/' + this.addForm.dialogType,
|
|
{
|
|
...this.addForm.info
|
|
}
|
|
).then((data) => {
|
|
this.$message.success('保存成功')
|
|
this.getList()
|
|
this.addForm.dialogVisible = false
|
|
}).catch((e) => {
|
|
})
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
resetAddForm() {
|
|
this.addForm.info = {
|
|
AIBOX_ID: '',
|
|
AIBOX_NAME: '',
|
|
CORPINFO_ID: ''
|
|
}
|
|
},
|
|
handleEdit(row) {
|
|
this.$parent.activeName = 'VideoList'
|
|
this.$parent.AIBOX_ID = row.AIBOX_ID
|
|
this.$parent.AIBOX_NAME = row.AIBOX_NAME
|
|
this.$parent.CAPACITY = row.CAPACITY
|
|
},
|
|
// 添加
|
|
handleAdd() {
|
|
this.resetAddForm()
|
|
this.addForm.dialogType = 'add'
|
|
this.addForm.dialogVisible = true
|
|
},
|
|
// 判断按钮权限，用于是否显示按钮
|
|
hasButton: function() {
|
|
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
|
requestFN(
|
|
'/head/hasButton',
|
|
{
|
|
keys: keys
|
|
}
|
|
).then((data) => {
|
|
this.add = data.aiboxManagerfhadminadd // 新增权限
|
|
this.del = data.aiboxManagerfhadmindel // 删除权限
|
|
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
|
}).catch((e) => {
|
|
this.listLoading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|