同步
This commit is contained in:
psh
181
acs/nladmin-ui/src/views/acs/history/udwData/index.vue
Normal file
181
acs/nladmin-ui/src/views/acs/history/udwData/index.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-select
|
||||
v-model="form.unified_key"
|
||||
placeholder="unified_key"
|
||||
class="filter-item"
|
||||
clearable
|
||||
filterable
|
||||
size="small"
|
||||
@change="crud.toQuery"
|
||||
>
|
||||
<el-option v-for="(item,index) in unified_key" :key="index" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="query.code"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="编号"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="crud.toQuery"
|
||||
/>
|
||||
</div>
|
||||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
|
||||
<crudOperation :permission="permission" />
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||
<el-form-item label="unified_key">
|
||||
<el-input v-model="form.unified_key" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="编号">
|
||||
<el-input v-model="form.key" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值">
|
||||
<el-input v-model="form.value" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
size="small"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column prop="unified_key" label="unified_key" />
|
||||
<el-table-column prop="key" label="编号" />
|
||||
<el-table-column prop="value" label="值" />
|
||||
<el-table-column
|
||||
v-permission="['admin','instruction:edit','instruction:del']"
|
||||
fixed="left"
|
||||
label="操作"
|
||||
width="150px"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button slot="right" size="mini" style="margin-left: -1px;margin-right: 2px" type="text" @click="dialogFormVisible = true">
|
||||
查询历史
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
<!--弹窗设置设备与图标绑定与角度-->
|
||||
<el-dialog title="历史" :visible.sync="dialogFormVisible" width="35%">
|
||||
<el-form :model="form" size="small">
|
||||
<el-form-item label="unified_key" prop="unified_key" label-width="100px">
|
||||
<el-input v-model="form.unified_key" :disabled="true" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="code" prop="key" label-width="100px">
|
||||
<el-input v-model="form.key" :disabled="true" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pagination from '@crud/Pagination'
|
||||
import crudUdwData from '@/api/acs/history/udwData'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import { getDicts } from '@/api/system/dict'
|
||||
|
||||
const defaultForm = {
|
||||
unified_key: '',
|
||||
key: null,
|
||||
value: null,
|
||||
last_modify_date: null
|
||||
}
|
||||
export default {
|
||||
dicts: [],
|
||||
name: 'UdwData',
|
||||
components: { pagination, crudOperation },
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
cruds() {
|
||||
return CRUD({
|
||||
title: '数据源',
|
||||
url: 'api/udw/',
|
||||
idField: 'key',
|
||||
sort: 'key',
|
||||
query: {},
|
||||
crudMethod: { ...crudUdwData },
|
||||
optShow: {
|
||||
}
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
unified_key: [
|
||||
{
|
||||
value: '1',
|
||||
label: 'opc_value'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: 'cached'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: 'socket'
|
||||
}
|
||||
],
|
||||
permission: {
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
rules: {
|
||||
},
|
||||
form: {
|
||||
unified_key: 'opc_value',
|
||||
key: null,
|
||||
value: null,
|
||||
last_modify_date: null
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getDicts().then(data => {
|
||||
this.dicts = data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||||
[CRUD.HOOK.beforeRefresh]() {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
18
acs/nladmin-ui/src/views/monitor/lucene/api/lucene.js
Normal file
18
acs/nladmin-ui/src/views/monitor/lucene/api/lucene.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getLogData(param) {
|
||||
return request({
|
||||
url: 'api/lucene/getAll',
|
||||
method: 'get',
|
||||
data: param
|
||||
})
|
||||
}
|
||||
|
||||
export function labelsValues() {
|
||||
return request({
|
||||
url: 'api/loki/labels/values',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default { getLogData, labelsValues }
|
||||
109
acs/nladmin-ui/src/views/monitor/lucene/index.vue
Normal file
109
acs/nladmin-ui/src/views/monitor/lucene/index.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<Search />
|
||||
<crudOperation />
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
style="width: 100%;"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<!-- <el-table-column type="selection" width="55"/>-->
|
||||
<!-- <el-table-column v-if="false" prop="id" label="id"/>-->
|
||||
<el-table-column prop="operate" width="50" label="操作" />
|
||||
<el-table-column prop="device_code" label="设备号" min-width="130" show-overflow-tooltip />
|
||||
<el-table-column prop="task_code" label="任务编号" />
|
||||
<el-table-column prop="instruct_code" label="指令编号" />
|
||||
<el-table-column prop="method" label="方法" />
|
||||
<el-table-column prop="status_code" label="状态码" />
|
||||
<el-table-column prop="requestparam" label="请求参数" />
|
||||
<el-table-column prop="responseparam" label="返回参数" />
|
||||
<el-table-column prop="logTime" width="170" label="记录时间" />
|
||||
<el-table-column prop="content" width="500" label="内容详情" />
|
||||
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Search from './search'
|
||||
import CRUD, { crud, header, presenter } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import { delAll } from '@/api/acs/lucene/log'
|
||||
|
||||
export default {
|
||||
name: 'LuceneLog',
|
||||
components: { Search, pagination, crudOperation },
|
||||
mixins: [presenter(), header(), crud()],
|
||||
cruds: function() {
|
||||
return CRUD({
|
||||
title: '系统参数', url: 'api/lucene/getAll', idField: 'id', sort: 'id,desc',
|
||||
queryOnPresenterCreated: true,
|
||||
optShow: {
|
||||
add: false,
|
||||
edit: false,
|
||||
del: false,
|
||||
download: false
|
||||
},
|
||||
page: {
|
||||
size: 40,
|
||||
total: 0,
|
||||
page: 0
|
||||
},
|
||||
query: {
|
||||
createTime: [new Date(new Date().setTime(new Date().getTime() - 3600 * 1000)), new Date(new Date().setTime(new Date().getTime() + 3600 * 1000))]
|
||||
}
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: { blurry: '123' },
|
||||
permission: {
|
||||
add: ['admin', 'param:add'],
|
||||
edit: ['admin', 'param:edit'],
|
||||
del: ['admin', 'param:del']
|
||||
},
|
||||
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||||
[CRUD.HOOK.beforeRefresh]() {
|
||||
return true
|
||||
},
|
||||
confirmDelAll() {
|
||||
this.$confirm(`确认清空所有操作日志吗?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.crud.delAllLoading = true
|
||||
delAll('device_execute').then(res => {
|
||||
this.crud.delAllLoading = false
|
||||
this.crud.dleChangePage(1)
|
||||
this.crud.delSuccessNotify()
|
||||
this.crud.toQuery()
|
||||
}).catch(err => {
|
||||
this.crud.delAllLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
150
acs/nladmin-ui/src/views/monitor/lucene/search.vue
Normal file
150
acs/nladmin-ui/src/views/monitor/lucene/search.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div v-if="crud.props.searchToggle">
|
||||
|
||||
<!-- <el-input
|
||||
v-model="query.device_code"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的设备号"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
/> -->
|
||||
<!-- <el-select
|
||||
v-model="query.device_code"
|
||||
clearable
|
||||
filterable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的设备号"
|
||||
class="filter-item"
|
||||
style="width: 190px"
|
||||
@change="crud.toQuery"
|
||||
>
|
||||
<el-option v-for="item in device_codes" :key="item.id" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
<el-select
|
||||
ref="test"
|
||||
v-model="query.device_code"
|
||||
filterable
|
||||
clearable
|
||||
reserve-keyword
|
||||
placeholder="设备号"
|
||||
style="width: 190px;"
|
||||
@change="crud.toQuery"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deviceList"
|
||||
:key="item.device_code"
|
||||
:label="item.device_code"
|
||||
:value="item.device_code"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<el-input
|
||||
v-model="query.method"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的方法名"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
/>
|
||||
<el-input
|
||||
v-model="query.status_code"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的状态码"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
/>
|
||||
<el-input
|
||||
v-model="query.requestparam"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的请求参数"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
/>
|
||||
<el-input
|
||||
v-model="query.responseparam"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的返回参数"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
/>
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的内容详情"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
/>
|
||||
<!--
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
-->
|
||||
|
||||
<el-date-picker
|
||||
v-model="query.createTime"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right"
|
||||
/>
|
||||
<rrOperation />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { header } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import deviceCrud from '@/api/acs/device/device'
|
||||
|
||||
export default {
|
||||
components: { rrOperation },
|
||||
mixins: [header()],
|
||||
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value2: '',
|
||||
deviceList: [],
|
||||
device_code: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
deviceCrud.selectDeviceList().then(data => {
|
||||
this.deviceList = data
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
64
acs/nladmin-ui/src/views/monitor/lucene/time.vue
Normal file
64
acs/nladmin-ui/src/views/monitor/lucene/time.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!--
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
-->
|
||||
|
||||
<el-date-picker
|
||||
v-model="query.createTime"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right"
|
||||
/>
|
||||
<rrOperation />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { header } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
|
||||
export default {
|
||||
components: { rrOperation },
|
||||
mixins: [header()],
|
||||
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value2: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="diagram">
|
||||
<diagram-toolbar
|
||||
style="z-index: 1"
|
||||
v-if="lf"
|
||||
class="diagram-toolbar"
|
||||
:lf="lf"
|
||||
@@ -37,6 +38,7 @@
|
||||
:only-edge="activeNodes.length === 0"
|
||||
:elements-style="properties"
|
||||
:show-choice="showChoice"
|
||||
:node="nodeObj"
|
||||
@setStyle="$_setStyle"
|
||||
@setZIndex="$_setZIndex"
|
||||
/>
|
||||
@@ -92,7 +94,8 @@ export default {
|
||||
nodeSize: {
|
||||
width: '',
|
||||
heigh: ''
|
||||
}
|
||||
},
|
||||
nodeObj: {} // 给子组件传递信息 -- 下拉框实时更新信息
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -144,29 +147,6 @@ export default {
|
||||
registerCustomElement(lf)
|
||||
lf.setDefaultEdgeType('pro-polyline')
|
||||
|
||||
// 为菜单追加选项（必须在 lf.render() 之前设置）
|
||||
lf.extension.menu.addMenuConfig({
|
||||
nodeMenu: [
|
||||
{
|
||||
text: '绑定设备号',
|
||||
callback(node) {
|
||||
console.log(lf.graphModel.getNodeModelById(node.id))
|
||||
lf.graphModel.getNodeModelById(node.id).draggable = false
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '属性',
|
||||
callback(node) {
|
||||
alert(`
|
||||
节点ID：${node.id}
|
||||
节点类型：${node.type}
|
||||
节点坐标：(x: ${node.x}, y: ${node.y})`
|
||||
)
|
||||
}
|
||||
}
|
||||
],
|
||||
edgeMenu: []
|
||||
})
|
||||
lf.render(data)
|
||||
this.lf = lf
|
||||
this.lf.on('selection:selected,node:click,blank:click,edge:click', () => { // 选择/点击事件
|
||||
@@ -187,12 +167,15 @@ export default {
|
||||
console.log('选中的节点', nodes)
|
||||
// const graphModel = this.lf.graphModel
|
||||
// console.log(graphModel)
|
||||
// 只传第一个,以第一个为显示是否绑定设备等信息，其余显示正常不用处理
|
||||
this.nodeObj = nodes[0]
|
||||
nodes.forEach(node => {
|
||||
if (node.type === 'html-node') {
|
||||
this.showChoice = true
|
||||
} else {
|
||||
this.showChoice = false
|
||||
}
|
||||
// debugger
|
||||
properties = { ...properties, ...node.properties }
|
||||
})
|
||||
edges.forEach(edge => {
|
||||
@@ -202,6 +185,7 @@ export default {
|
||||
return properties
|
||||
},
|
||||
$_dragInNode(type) {
|
||||
// debugger
|
||||
this.lf.dnd.startDrag({ // 拖拽创建结点
|
||||
type
|
||||
})
|
||||
@@ -238,6 +222,8 @@ export default {
|
||||
lf.render(data)
|
||||
},
|
||||
$_saveGraph() { // 保存数据
|
||||
// debugger
|
||||
// console.log(this.defaultForm)
|
||||
if (this.defaultForm.stage_code === null) {
|
||||
this.$message.error('请选择舞台！')
|
||||
} else {
|
||||
|
||||
@@ -34,6 +34,56 @@
|
||||
<div slot="reference" class="border-color" :style="{'backgroundColor': style.gradientColor}" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<span>设备绑定</span>
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
v-model="style.device"
|
||||
size="mini"
|
||||
@change="$_changeDevice"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deviceCodeOptions"
|
||||
:key="item.device_id"
|
||||
:value="item.device_code"
|
||||
:label="item.device_code"
|
||||
>
|
||||
<span style="float: left">{{ item.device_code }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.device_name }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<span>旋转角度</span>
|
||||
<el-input-number
|
||||
v-model="style.transform"
|
||||
controls-position="right"
|
||||
size="mini"
|
||||
:min="0"
|
||||
:max="360"
|
||||
:step="90"
|
||||
@change="$_changeTransform"
|
||||
/>
|
||||
<span>度</span>
|
||||
</div>
|
||||
<div v-if="showChoice" class="setting-item">
|
||||
<span>设备选择</span>
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
v-model="style.imageUrl"
|
||||
size="mini"
|
||||
@change="$_changeImageUrl"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in imageUrlOptions"
|
||||
:key="item.image_uuid"
|
||||
:value="item.image_code"
|
||||
:label="item.image_name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<span>线条样式</span>
|
||||
<el-select v-model="style.borderStyle" size="small" @change="$_selectBorder">
|
||||
@@ -133,37 +183,6 @@
|
||||
<el-button size="small" @click="$emit('setZIndex', 'top')">置为顶部</el-button>
|
||||
<el-button size="small" @click="$emit('setZIndex', 'bottom')">置为底部</el-button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<span>设备绑定</span>
|
||||
<el-input v-model="style.device" placeholder="输入设备号" size="small" @change="$_changeDevice" />
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<span>旋转角度</span>
|
||||
<el-input-number
|
||||
v-model="style.transform"
|
||||
controls-position="right"
|
||||
size="mini"
|
||||
:min="0"
|
||||
:max="360"
|
||||
@change="$_changeTransform"
|
||||
/>
|
||||
<span>度</span>
|
||||
</div>
|
||||
<div v-if="showChoice" class="setting-item">
|
||||
<span>设备选择</span>
|
||||
<el-select
|
||||
v-model="style.imageUrl"
|
||||
size="mini"
|
||||
@change="$_changeImageUrl"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in imageUrlOptions"
|
||||
:key="item.image_uuid"
|
||||
:value="item.image_code"
|
||||
:label="item.image_name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -172,6 +191,7 @@
|
||||
import { Sketch } from 'vue-color'
|
||||
import { shortStyles, borderStyles, fontFamilies } from '../constant'
|
||||
import crudStageImage from '@/api/logicflow/stageImage'
|
||||
import crudDevice from '@/api/acs/device/device'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -180,7 +200,8 @@ export default {
|
||||
props: {
|
||||
elementsStyle: Object,
|
||||
onlyEdge: Boolean, // 是否是只设置边的属性，当只设置边的属性时，隐藏快捷样式和背景色设置
|
||||
showChoice: Boolean
|
||||
showChoice: Boolean,
|
||||
node: Object // 父组件传来的对象
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -209,7 +230,8 @@ export default {
|
||||
fontWeight: '', // 文本加粗
|
||||
lineHeightOptions: Array(5).fill(1).map((_, i) => _ + i * 0.5),
|
||||
// imageUrl: '',
|
||||
imageUrlOptions: []
|
||||
imageUrlOptions: [],
|
||||
deviceCodeOptions: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -218,10 +240,16 @@ export default {
|
||||
this.style = { ...this.style, ...val }
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
node(newVal, oldVal) {
|
||||
// newVal是新值，oldVal是旧值
|
||||
this.node = newVal
|
||||
this.cleanParam()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initStageIconList()
|
||||
this.initDevicesList()
|
||||
},
|
||||
methods: {
|
||||
initStageIconList() { // 初始化图标数据
|
||||
@@ -232,6 +260,12 @@ export default {
|
||||
this.imageUrlOptions = data
|
||||
})
|
||||
},
|
||||
initDevicesList() {
|
||||
crudDevice.selectDeviceList().then(res => {
|
||||
console.log('devices:', res)
|
||||
this.deviceCodeOptions = res
|
||||
})
|
||||
},
|
||||
setStyle(item) {
|
||||
this.$emit('setStyle', item)
|
||||
},
|
||||
@@ -319,6 +353,17 @@ export default {
|
||||
this.$emit('setStyle', {
|
||||
device: val
|
||||
})
|
||||
},
|
||||
cleanParam() { // 判断来清空下拉框
|
||||
if (this.node.properties.device === undefined) {
|
||||
this.style.device = ''
|
||||
}
|
||||
if (this.node.properties.imageUrl === undefined) {
|
||||
this.style.imageUrl = ''
|
||||
}
|
||||
if (this.node.properties.transform === undefined) {
|
||||
this.style.transform = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,223 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="监控详情"
|
||||
append-to-body
|
||||
:visible.sync="dialogVisible"
|
||||
fullscreen
|
||||
@open="open"
|
||||
@close="close"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="18" style="border: 1px solid white">
|
||||
<span />
|
||||
</el-col>
|
||||
<el-col :span="6" style="margin-bottom: 20px">
|
||||
<!-- <span style="float: right">
|
||||
<el-button icon="el-icon-close" size="mini" type="info" @click="dialogVisible = false">返 回</el-button>
|
||||
</span>-->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<el-form ref="form" disabled :inline="true" :model="form" :rules="rules" size="mini" label-width="80px">
|
||||
<el-form-item label="设备编码">
|
||||
<el-input v-model="device_code" placeholder="自动生产" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备名称" prop="dtl_count">
|
||||
<el-input v-model="device_name" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<div class="crud-opts2" style="margin-top: 30px;margin-bottom: 15px">
|
||||
<el-form ref="form" disabled :inline="true" :model="form" :rules="rules" size="mini" label-width="200px">
|
||||
<el-form-item label="心跳">
|
||||
<el-input v-model="form.heartbeat" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工作模式">
|
||||
<el-input v-model="form.mode" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="故障">
|
||||
<el-input v-model="form.error" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="故障次数">
|
||||
<el-input v-model="form.error_num" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="待机时间(调试)">
|
||||
<el-input v-model="form.ready_time" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="生产时间">
|
||||
<el-input v-model="form.running_time" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="故障时间">
|
||||
<el-input v-model="form.error_time" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="温度">
|
||||
<el-input v-model="form.temperature" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前生产产品编号">
|
||||
<el-input v-model="form.material" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="缺料信号">
|
||||
<el-input v-model="form.lack_material" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上料数量">
|
||||
<el-input v-model="form.feeding_qty" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下料数量">
|
||||
<el-input v-model="form.blanking_qty" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前生产合格品数量">
|
||||
<el-input v-model="form.qualified_qty" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前生产不合格品数量">
|
||||
<el-input v-model="form.unqualified_qty" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="生产完成">
|
||||
<el-input v-model="form.finish" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务号">
|
||||
<el-input v-model="form.task" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备暂停">
|
||||
<el-input v-model="form.pause" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { crud } from '@crud/crud'
|
||||
|
||||
export default {
|
||||
name: 'XJDeviceMonitor',
|
||||
components: {},
|
||||
mixins: [crud()],
|
||||
props: {
|
||||
dialogShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
openParam: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
dicts: [],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
heartbeat: '',
|
||||
mode: '',
|
||||
error: '',
|
||||
error_num: '',
|
||||
ready_time: '',
|
||||
running_time: '',
|
||||
error_time: '',
|
||||
temperature: '',
|
||||
material: '',
|
||||
lack_material: '',
|
||||
feeding_qty: '',
|
||||
blanking_qty: '',
|
||||
qualified_qty: '',
|
||||
unqualified_qty: '',
|
||||
finish: '',
|
||||
task: '',
|
||||
pause: ''
|
||||
},
|
||||
device_code: '',
|
||||
device_name: '',
|
||||
rules: {
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dialogShow: {
|
||||
handler(newValue) {
|
||||
this.dialogVisible = newValue
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.webSocket()
|
||||
},
|
||||
close() {
|
||||
this.$emit('AddChanged')
|
||||
},
|
||||
setForm(data) {
|
||||
this.dialogVisible = true
|
||||
this.form = data.data
|
||||
this.device_code = data.device_code
|
||||
this.device_name = data.device_name
|
||||
// this.form = row
|
||||
},
|
||||
webSocket() {
|
||||
const that = this
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
|
||||
type: 'warning',
|
||||
duration: 0
|
||||
})
|
||||
} else {
|
||||
const id = 'xj_device_monitor'
|
||||
// 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
|
||||
// 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
|
||||
|
||||
// const wsUri = process.env.VUE_APP_WS_API + '/webSocket/' + id
|
||||
const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + id
|
||||
this.socket = new WebSocket(wsUri)
|
||||
// 监听socket打开
|
||||
this.socket.onopen = function() {
|
||||
console.log('浏览器WebSocket已打开')
|
||||
// that.socket.send('测试客户端发送消息')
|
||||
}
|
||||
|
||||
// 监听socket消息接收
|
||||
this.socket.onmessage = function(msg) {
|
||||
const list = JSON.parse(msg.data).msg.detail
|
||||
// console.log(list)
|
||||
|
||||
for (const item of list) {
|
||||
const obj = JSON.parse(JSON.stringify(item))
|
||||
if (obj.device_code === that.device_code) {
|
||||
that.form = obj.data
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听socket错误
|
||||
this.socket.onerror = function() {
|
||||
that.$notify({
|
||||
title: '错误',
|
||||
message: '服务器错误，无法接收实时报警信息',
|
||||
type: 'error',
|
||||
duration: 0
|
||||
})
|
||||
}
|
||||
// 监听socket关闭
|
||||
this.socket.onclose = function() {
|
||||
console.log('WebSocket已关闭')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.crud-opts2 {
|
||||
padding: 0 0;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.crud-opts2 .crud-opts-right2 {
|
||||
margin-left: auto;
|
||||
padding: 4px 4px;
|
||||
}
|
||||
.input-with-select {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -197,11 +197,10 @@ export default {
|
||||
name: 'MonitorDevice',
|
||||
data() {
|
||||
return {
|
||||
stageParam: 'stage_code', // 舞台参数
|
||||
stageParam: 'age', // 舞台参数
|
||||
dialogDeviceMsgVisible: false, // 显示设备信息的dialog
|
||||
device_code: null,
|
||||
tops: '20vh', // 初始top
|
||||
stage_code: '',
|
||||
stageSelectList: [],
|
||||
arr: [], // 显示数组
|
||||
dialogFormVisible: false,
|
||||
@@ -304,21 +303,11 @@ export default {
|
||||
this.initStageData()
|
||||
},
|
||||
initStageData() {
|
||||
// 获取舞台编码
|
||||
paramCrud.getValueByCode(this.stageParam).then(res => {
|
||||
// console.log(res)
|
||||
if (res.value) {
|
||||
crudStage.getNewStageDataByCode(res.value).then(res => { // 通过舞台编码获取舞台数据并且赋值到lf对象
|
||||
data = JSON.parse(res.stage_data)
|
||||
lf.render(data)
|
||||
this.initStatus() // 初始化状态
|
||||
})
|
||||
} else {
|
||||
this.$notify.error({
|
||||
title: '错误',
|
||||
message: '请设置参数!'
|
||||
})
|
||||
}
|
||||
// 获取舞台数据
|
||||
crudStage.getNewStageDataByCode(this.stageParam).then(res => { // 通过舞台编码获取舞台数据并且赋值到lf对象
|
||||
data = JSON.parse(res.stage_data)
|
||||
lf.render(data)
|
||||
this.initStatus() // 初始化状态
|
||||
})
|
||||
this.timer = setInterval(() => { // 定时刷新设备的状态信息
|
||||
console.log('定时器启动')
|
||||
|
||||
@@ -154,7 +154,7 @@ export default {
|
||||
presenter(),
|
||||
header(),
|
||||
form(function() {
|
||||
return Object.assign({ dict: { id: this.dictId }}, defaultForm)
|
||||
return Object.assign({ code_rule_id: this.dictId }, defaultForm)
|
||||
})],
|
||||
data() {
|
||||
return {
|
||||
@@ -183,6 +183,12 @@ export default {
|
||||
format: [
|
||||
{ required: true, message: '请输入日期格式', trigger: 'blur' }
|
||||
],
|
||||
step: [
|
||||
{ required: true, message: '请输入步长', trigger: 'blur' }
|
||||
],
|
||||
fillchar: [
|
||||
{ required: true, message: '请输入填充值', trigger: 'blur' }
|
||||
],
|
||||
max_value: [
|
||||
{ required: true, message: '请输入最大值', trigger: 'blur' }
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user