修改波形
This commit is contained in:
@@ -9,7 +9,7 @@
|
||||
style="position: absolute; right: 10px; top: 0px; z-index: 20000"
|
||||
type="primary"
|
||||
link
|
||||
icon="el-icon-download"
|
||||
icon="el-icon-Download"
|
||||
title="生成图片"
|
||||
@click="download"
|
||||
>
|
||||
@@ -92,9 +92,9 @@ export default {
|
||||
},
|
||||
created() {
|
||||
if (this.flag == 1) {
|
||||
this.vh = mainHeight(175).height
|
||||
this.vh = mainHeight(165).height
|
||||
} else {
|
||||
this.vh = mainHeight(175,2).height
|
||||
this.vh = mainHeight(165,2).height
|
||||
}
|
||||
this.vw = '100%'
|
||||
},
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
style="position: absolute; right: 10px; top: 0px; z-index: 20000"
|
||||
type="primary"
|
||||
link
|
||||
icon="download"
|
||||
icon="el-icon-Download"
|
||||
title="生成图片"
|
||||
@click="download"
|
||||
>
|
||||
@@ -78,9 +78,9 @@ export default {
|
||||
created() {
|
||||
|
||||
if (this.flag == 1) {
|
||||
this.vh = mainHeight(175).height
|
||||
this.vh = mainHeight(165).height
|
||||
} else {
|
||||
this.vh = mainHeight(175,2).height
|
||||
this.vh = mainHeight(165,2).height
|
||||
}
|
||||
this.vw = '100%'
|
||||
},
|
||||
@@ -1151,5 +1151,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -67,10 +67,11 @@
|
||||
:class="btn.class"
|
||||
class="table-operate"
|
||||
:type="btn.type"
|
||||
:loading="props.row.loading || false"
|
||||
:disabled="btn.disabled && btn.disabled(row, field)"
|
||||
v-bind="btn.attr"
|
||||
>
|
||||
<Icon :name="btn.icon" />
|
||||
<Icon v-if="!props.row.loading" :name="btn.icon" />
|
||||
<div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
|
||||
</el-button>
|
||||
|
||||
|
||||
@@ -26,26 +26,7 @@
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!-- <div style="height: 300px;"> -->
|
||||
<Table :isGroup="true">
|
||||
<template v-slot:columns>
|
||||
<vxe-column title="操作" min-width="15px">
|
||||
<template v-slot:default="scoped">
|
||||
<!-- {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }} -->
|
||||
<el-button
|
||||
:icon="Tickets"
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="scoped.row.wavePath && scoped.row.evtParamTm < 20"
|
||||
@click="getboxin(scoped.row)"
|
||||
>
|
||||
波形分析
|
||||
</el-button>
|
||||
<el-button v-else size="small" :icon="Tickets" type="info" :disabled="true">暂无波形</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</template>
|
||||
>
|
||||
</Table>
|
||||
<Table></Table>
|
||||
</div>
|
||||
<div style="padding: 10px" v-if="!view">
|
||||
<el-row>
|
||||
@@ -66,6 +47,7 @@
|
||||
@click="backbxlb"
|
||||
type="primary"
|
||||
class="el-icon-refresh-right"
|
||||
icon="el-icon-CloseBold"
|
||||
style="float: right"
|
||||
>
|
||||
返回
|
||||
@@ -76,7 +58,7 @@
|
||||
<el-tab-pane
|
||||
label="瞬时波形"
|
||||
name="ssbx"
|
||||
class="boxbx"
|
||||
class="boxbx pt10 pb10"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<shushiboxi
|
||||
@@ -86,7 +68,12 @@
|
||||
:wp="wp"
|
||||
></shushiboxi>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
|
||||
<el-tab-pane
|
||||
label="RMS波形"
|
||||
class="boxbx pt10 pb10"
|
||||
name="rmsbx"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<rmsboxi
|
||||
v-if="bxactiveName == 'rmsbx' && showBoxi"
|
||||
:value="value"
|
||||
@@ -102,11 +89,10 @@
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { Tickets } from '@element-plus/icons-vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import shushiboxi from '@/components/echarts/shushiboxi.vue'
|
||||
import rmsboxi from '@/components/echarts/rmsboxi.vue'
|
||||
|
||||
import { analyseWave } from '@/api/common'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
|
||||
const props = defineProps(['deviceTree'])
|
||||
@@ -156,10 +142,45 @@ const tableStore = new TableStore({
|
||||
{ title: '相别', field: 'evtParamPhase', align: 'center' },
|
||||
{ title: '持续时间(s)', field: 'evtParamTm', align: 'center' },
|
||||
{ title: '暂降深度', field: 'evtParamVVaDepth', align: 'center' },
|
||||
{ title: '发生时刻', field: 'startTime', align: 'center' }
|
||||
{ title: '发生时刻', field: 'startTime', align: 'center' },
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '130',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
text: '波形分析',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-DataLine',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return !row.wavePath && row.evtParamTm < 20
|
||||
},
|
||||
click: async row => {
|
||||
row.loading = true
|
||||
boxoList.value = row
|
||||
await analyseWave(row.id)
|
||||
.then(res => {
|
||||
row.loading = false
|
||||
if (res != undefined) {
|
||||
wp.value = res.data
|
||||
view.value = false
|
||||
view2.value = true
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
row.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.loading = false
|
||||
item.evtParamTm = item.evtParamTm.split('s')[0]
|
||||
})
|
||||
}
|
||||
@@ -177,21 +198,22 @@ tableStore.table.params.eventIds = []
|
||||
tableStore.table.params.status = ''
|
||||
tableStore.table.params.target = []
|
||||
tableStore.table.params.userId = ''
|
||||
import { analyseWave } from '@/api/common'
|
||||
|
||||
const sourceChange = (e: any) => {
|
||||
tableStore.table.params.engineeringid = e[0] || ''
|
||||
tableStore.table.params.projectId = e[1] || ''
|
||||
tableStore.table.params.deviceId = e[2] || ''
|
||||
}
|
||||
const getboxin = async (row: any) => {
|
||||
boxoList.value = row
|
||||
await analyseWave(row.id).then(res => {
|
||||
if (res != undefined) {
|
||||
wp.value = res.data
|
||||
view.value = false
|
||||
view2.value = true
|
||||
}
|
||||
})
|
||||
console.log('🚀 ~ getboxin ~ row:', row)
|
||||
// boxoList.value = row
|
||||
// await analyseWave(row.id).then(res => {
|
||||
// if (res != undefined) {
|
||||
// wp.value = res.data
|
||||
// view.value = false
|
||||
// view2.value = true
|
||||
// }
|
||||
// })
|
||||
}
|
||||
const changeView = () => {
|
||||
showBoxi.value = false
|
||||
@@ -211,13 +233,13 @@ const backbxlb = () => {
|
||||
view.value = true
|
||||
view2.value = false
|
||||
setTimeout(() => {
|
||||
tableStore.table.height = mainHeight(190).height as any
|
||||
}, 0)
|
||||
tableStore.table.height = mainHeight(180).height as any
|
||||
}, 0)
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const bxecharts = mainHeight(175).height as any
|
||||
const bxecharts = mainHeight(155).height as any
|
||||
setTimeout(() => {
|
||||
tableStore.table.height = mainHeight(180).height as any
|
||||
}, 0)
|
||||
|
||||
@@ -1,135 +0,0 @@
|
||||
<template>
|
||||
<TableHeader datePicker ref="refheader">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="数据来源">
|
||||
<el-cascader
|
||||
placeholder="请选择数据来源"
|
||||
@change="sourceChange"
|
||||
:options="props.deviceTree"
|
||||
:show-all-levels="false"
|
||||
:props="{ checkStrictly: true }"
|
||||
clearable
|
||||
></el-cascader>
|
||||
<!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="级别">
|
||||
<el-select v-model="tableStore.table.params.level" placeholder="请选择级别" clearable>
|
||||
<el-option
|
||||
v-for="item in rankOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!-- <div style="height: 300px;"> -->
|
||||
<!-- <Table ref="tableRef" :isGroup="true" /> -->
|
||||
<div :style="{ height: tableHeight }" v-loading="tableLoading">
|
||||
<vxe-table :data="tableStore.table.data" v-bind="defaultAttribute" height="auto" auto-resize>
|
||||
<vxe-column
|
||||
v-for="item in tableStore.table.column"
|
||||
:field="item.field"
|
||||
:title="item.title"
|
||||
:min-width="item.width"
|
||||
:sortable="item.sortable"
|
||||
></vxe-column>
|
||||
<vxe-column title="操作" min-width="220px">
|
||||
<template v-slot:default="scoped">
|
||||
<!-- {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }} -->
|
||||
<el-button icon="el-icon-s-marketing" type="primary" v-if="scoped.row.wavePath && scoped.row.evtParamTm<20" @click="getboxin(scoped.row)">波形分析</el-button>
|
||||
<el-button v-else icon="el-icon-s-marketing" type="info" :disabled="true">暂无波形</el-button>
|
||||
</template>
|
||||
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
:currentPage="tableStore.table.params!.pageNum"
|
||||
:page-size="tableStore.table.params!.pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
background
|
||||
:layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
|
||||
:total="tableStore.table.total"
|
||||
@size-change="onTableSizeChange"
|
||||
@current-change="onTableCurrentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
|
||||
const props = defineProps(['deviceTree'])
|
||||
|
||||
const refheader = ref()
|
||||
const tableLoading = ref(false)
|
||||
|
||||
const rankOptions = ref([
|
||||
{
|
||||
value: '1',
|
||||
label: '1级'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '2级'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '3级'
|
||||
}
|
||||
])
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/cs-harmonic-boot/eventUser/queryEventpage',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ title: '工程名称', field: 'engineeringName', align: 'center' },
|
||||
{ title: '项目名称', field: 'projectName', align: 'center' },
|
||||
{ title: '设备名称', field: 'equipmentName', align: 'center' },
|
||||
{ title: '事件描述', field: 'showName', align: 'center' },
|
||||
{ title: '事件发生位置', field: 'evtParamPosition', align: 'center' },
|
||||
{ title: '相别', field: 'evtParamPhase', align: 'center' },
|
||||
{ title: '持续时间', field: 'evtParamTm', align: 'center' },
|
||||
{ title: '暂降深度', field: 'evtParamVVaDepth', align: 'center' },
|
||||
{ title: '发生时刻', field: 'startTime', align: 'center' },
|
||||
{ title: '操作', field: '', align: 'center' }
|
||||
]
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
// "target": [],
|
||||
// "type": "",
|
||||
// "userId": ""
|
||||
tableStore.table.params.engineeringid = ''
|
||||
tableStore.table.params.projectId = ''
|
||||
tableStore.table.params.deviceId = ''
|
||||
tableStore.table.params.type = 1
|
||||
tableStore.table.params.eventIds = []
|
||||
tableStore.table.params.status = ''
|
||||
tableStore.table.params.target = []
|
||||
tableStore.table.params.userId = ''
|
||||
|
||||
const sourceChange = (e: any) => {
|
||||
tableStore.table.params.engineeringid = e[0] || ''
|
||||
tableStore.table.params.projectId = e[1] || ''
|
||||
tableStore.table.params.deviceId = e[2] || ''
|
||||
}
|
||||
// 波形分析
|
||||
const getboxin=()=>{
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const tableHeight = mainHeight(225).height
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style></style>
|
||||
@@ -1,8 +1,67 @@
|
||||
<template>
|
||||
<div class="default-main analyze-dvr" :style="{ height: pageHeight.height }" v-loading="loading">
|
||||
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
|
||||
<div class="analyze-dvr-right">
|
||||
<Table ref="tableRef" />
|
||||
<div class="default-main">
|
||||
<div class="analyze-dvr" v-show="view" :style="{ height: pageHeight.height }" v-loading="loading">
|
||||
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
|
||||
<div class="analyze-dvr-right">
|
||||
<Table v-if="view" ref="tableRef"></Table>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<span v-if="view2" style="font-size: 14px; font-weight: ; line-height: 30px">值类型选择:</span>
|
||||
<el-select v-if="view2" @change="changeView" v-model="value" placeholder="请选择值类型">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button
|
||||
v-if="view2"
|
||||
@click="backbxlb"
|
||||
type="primary"
|
||||
class="el-icon-refresh-right"
|
||||
icon="el-icon-CloseBold"
|
||||
style="float: right"
|
||||
>
|
||||
返回
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-tabs v-if="view2" class="default-main" v-model="bxactiveName" @tab-click="bxhandleClick">
|
||||
<el-tab-pane
|
||||
label="瞬时波形"
|
||||
name="ssbx"
|
||||
class="boxbx pt10 pb10"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<shushiboxi
|
||||
v-if="bxactiveName == 'ssbx' && showBoxi"
|
||||
:value="value"
|
||||
:boxoList="boxoList"
|
||||
:wp="wp"
|
||||
></shushiboxi>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="RMS波形"
|
||||
class="boxbx pt10 pb10"
|
||||
name="rmsbx"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<rmsboxi
|
||||
v-if="bxactiveName == 'rmsbx' && showBoxi"
|
||||
:value="value"
|
||||
:boxoList="boxoList"
|
||||
:wp="wp"
|
||||
></rmsboxi>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- <xiebofenxi ref="child" :bxshuju="bxshuju" @backfh="back"></xiebofenxi> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -13,12 +72,32 @@ import { mainHeight } from '@/utils/layout'
|
||||
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
|
||||
import { analyseWave } from '@/api/common'
|
||||
import shushiboxi from '@/components/echarts/shushiboxi.vue'
|
||||
import rmsboxi from '@/components/echarts/rmsboxi.vue'
|
||||
defineOptions({
|
||||
name: 'govern/analyze/DVR'
|
||||
})
|
||||
const pageHeight = mainHeight(20)
|
||||
const loading = ref(false)
|
||||
const view = ref(true)
|
||||
const view2 = ref(false)
|
||||
const showBoxi = ref(true)
|
||||
|
||||
const bxactiveName = ref('ssbx')
|
||||
const boxoList = ref({})
|
||||
const wp = ref({})
|
||||
const value = ref(1)
|
||||
const options = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: '一次值'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '二次值'
|
||||
}
|
||||
])
|
||||
const tableStore = new TableStore({
|
||||
url: '/cs-harmonic-boot/eventUser/queryEventpage',
|
||||
method: 'POST',
|
||||
@@ -35,16 +114,40 @@ const tableStore = new TableStore({
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '波形分析',
|
||||
text: '波形分析',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-DataLine',
|
||||
render: 'tipButton',
|
||||
click: row => {
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return !row.wavePath && row.evtParamTm < 20
|
||||
},
|
||||
|
||||
click: async row => {
|
||||
row.loading = true
|
||||
boxoList.value = row
|
||||
await analyseWave(row.id)
|
||||
.then(res => {
|
||||
row.loading = false
|
||||
if (res != undefined) {
|
||||
wp.value = res.data
|
||||
view.value = false
|
||||
view2.value = true
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
row.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
],
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.loading = false
|
||||
item.evtParamTm = item.evtParamTm.split('s')[0]
|
||||
})
|
||||
}
|
||||
})
|
||||
tableStore.table.params.type = 0
|
||||
provide('tableStore', tableStore)
|
||||
@@ -55,6 +158,26 @@ const nodeClick = async (e: anyObj) => {
|
||||
tableStore.index()
|
||||
}
|
||||
}
|
||||
|
||||
const changeView = () => {
|
||||
showBoxi.value = false
|
||||
setTimeout(() => {
|
||||
showBoxi.value = true
|
||||
}, 0)
|
||||
}
|
||||
const bxhandleClick = (tab: any) => {
|
||||
if (tab.name == 'ssbx') {
|
||||
bxactiveName.value = 'ssbx'
|
||||
} else if (tab.name == 'rmsbx') {
|
||||
bxactiveName.value = 'rmsbx'
|
||||
}
|
||||
// console.log(tab, event);
|
||||
}
|
||||
const backbxlb = () => {
|
||||
view.value = true
|
||||
view2.value = false
|
||||
}
|
||||
const bxecharts = mainHeight(95).height as any
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -60,62 +60,7 @@
|
||||
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef">
|
||||
<template v-slot:columns>
|
||||
<vxe-column field="name" title="设备名称"></vxe-column>
|
||||
<vxe-column field="devType" title="设备类型">
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
devTypeOptions.filter((item: any) => item.value == row.devType)[0] &&
|
||||
devTypeOptions.filter((item: any) => item.value == row.devType)[0].label
|
||||
}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="devModel" title="设备型号">
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
devModelOptions.filter((item: any) => item.value == row.devModel)[0] &&
|
||||
devModelOptions.filter((item: any) => item.value == row.devModel)[0].label
|
||||
}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="devAccessMethod" title="通讯协议">
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
row.devAccessMethod === 'MQTT'
|
||||
? 'MQTT'
|
||||
: row.devAccessMethod === 'cloud'
|
||||
? 'CLD'
|
||||
: row.devAccessMethod
|
||||
}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="createTime" title="录入时间"></vxe-column>
|
||||
<vxe-column field="ndid" title="网络设备ID"></vxe-column>
|
||||
<vxe-column field="status" title="状态">
|
||||
<template #default="{ row }">
|
||||
{{ row.status == 1 ? '未注册' : row.status == 2 ? '注册' : '接入' }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="操作" min-width="340">
|
||||
<template #default="{ row }">
|
||||
<!-- <div class="table-operation"> -->
|
||||
<el-button size="small" type="primary" @click="edit(row)" icon="el-icon-Edit">编辑</el-button>
|
||||
<el-button size="small" type="primary" @click="qrCode(row)" icon="el-icon-Grid">
|
||||
二维码
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="reset(row.ndid)" icon="el-icon-Setting">
|
||||
出厂恢复
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="deletes(row.id)" icon="el-icon-Delete">
|
||||
删除
|
||||
</el-button>
|
||||
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
</vxe-column>
|
||||
</template>
|
||||
</Table>
|
||||
<Table ref="tableRef"></Table>
|
||||
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
@@ -186,7 +131,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, computed, reactive } from 'vue'
|
||||
import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
@@ -227,6 +172,26 @@ const dialogFormVisible = ref(false)
|
||||
const dialogTitle = ref('新增设备')
|
||||
|
||||
const devModelOptions: any = ref([])
|
||||
queryByCode('Device_Type').then(res => {
|
||||
queryCsDictTree(res.data.id).then(res => {
|
||||
devTypeOptions.value = res.data.map((item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
...item
|
||||
}
|
||||
})
|
||||
})
|
||||
queryByid(res.data.id).then(res => {
|
||||
devModelOptions.value = res.data.map((item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
...item
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
const devModelOptionsFilter = computed(() => {
|
||||
return devModelOptions.value.filter((item: any) => {
|
||||
if (tableStore.table.params.devType) {
|
||||
@@ -249,7 +214,134 @@ const formDevModelOptionsFilter = computed(() => {
|
||||
const tableStore = new TableStore({
|
||||
url: '/cs-device-boot/EquipmentDelivery/list',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
column: [
|
||||
{ title: '设备名称', field: 'name' },
|
||||
{
|
||||
title: '设备类型',
|
||||
field: 'devType',
|
||||
formatter: row => {
|
||||
return (
|
||||
devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0] &&
|
||||
devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0].label
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '设备型号',
|
||||
field: 'devModel',
|
||||
formatter: row => {
|
||||
return (
|
||||
devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0] &&
|
||||
devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0].label
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '通讯协议',
|
||||
field: 'devAccessMethod',
|
||||
formatter: row => {
|
||||
return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'cloud' ? 'CLD' : row.cellValue
|
||||
}
|
||||
},
|
||||
{ title: '录入时间', field: 'createTime' },
|
||||
{ title: '网络设备ID', field: 'ndid' },
|
||||
{
|
||||
title: '状态',
|
||||
field: 'status',
|
||||
formatter: row => {
|
||||
return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '340',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
text: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Edit',
|
||||
render: 'basicButton',
|
||||
|
||||
click: async row => {
|
||||
dialogFormVisible.value = true
|
||||
dialogTitle.value = '编辑设备'
|
||||
for (let key in form) {
|
||||
form[key] = row[key]
|
||||
}
|
||||
form.id = row.id
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
text: '二维码',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Grid',
|
||||
render: 'basicButton',
|
||||
|
||||
click: row => {
|
||||
deivce.value = row
|
||||
deivce.value.qrPath = localStorage.getItem('STATIC_URL') + deivce.value.qrPath
|
||||
setTimeout(() => {
|
||||
html2canvas(document.querySelector('.qrcode-label'), {
|
||||
useCORS: true
|
||||
}).then(canvas => {
|
||||
let url = canvas.toDataURL('image/png')
|
||||
// 下载图片
|
||||
let a = document.createElement('a')
|
||||
let event = new MouseEvent('click')
|
||||
a.href = url
|
||||
a.download = row.mac + '.png'
|
||||
a.dispatchEvent(event)
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
text: '出厂恢复',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Setting',
|
||||
render: 'basicButton',
|
||||
|
||||
click: row => {
|
||||
ElMessageBox.confirm('确定该设备恢复出厂吗?', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
resetEquipmentDelivery(row.ndid).then(res => {
|
||||
ElMessage.success('恢复成功!')
|
||||
tableStore.onTableAction('search', {})
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
text: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'basicButton',
|
||||
|
||||
click: row => {
|
||||
ElMessageBox.confirm('确定删除该设备吗?', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteEquipmentDelivery(row.id).then(res => {
|
||||
ElMessage.success('删除成功!')
|
||||
tableStore.onTableAction('search', {})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
for (let key in tableStore.table.params) {
|
||||
if (tableStore.table.params[key] === '') {
|
||||
@@ -259,26 +351,7 @@ const tableStore = new TableStore({
|
||||
}
|
||||
})
|
||||
tableStore.table.params.orderBy = 'desc'
|
||||
queryByCode('Device_Type').then(res => {
|
||||
queryCsDictTree(res.data.id).then(res => {
|
||||
devTypeOptions.value = res.data.map((item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
...item
|
||||
}
|
||||
})
|
||||
})
|
||||
queryByid(res.data.id).then(res => {
|
||||
devModelOptions.value = res.data.map((item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
...item
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// 设备类型
|
||||
const devTypeChange = (e: any) => {
|
||||
if (!e) {
|
||||
@@ -299,7 +372,6 @@ const bulkImport = (e: any) => {
|
||||
reader.readAsText(res)
|
||||
reader.onload = (e: any) => {
|
||||
let data = JSON.parse(e.target.result)
|
||||
console.log('🚀 ~ batchImportDevice ~ data:', data)
|
||||
if (data.code === 'A0000') {
|
||||
ElMessage.success(data.message)
|
||||
tableStore.onTableAction('search', {})
|
||||
@@ -325,15 +397,7 @@ const add = () => {
|
||||
dialogFormVisible.value = true
|
||||
dialogTitle.value = '新增设备'
|
||||
}
|
||||
// 编辑
|
||||
const edit = (row: any) => {
|
||||
dialogFormVisible.value = true
|
||||
dialogTitle.value = '编辑设备'
|
||||
for (let key in form) {
|
||||
form[key] = row[key]
|
||||
}
|
||||
form.id = row.id
|
||||
}
|
||||
|
||||
// 确认
|
||||
const onSubmit = () => {
|
||||
ruleFormRef.value.validate((valid: any) => {
|
||||
@@ -358,54 +422,21 @@ const onSubmit = () => {
|
||||
const resetForm = () => {
|
||||
ruleFormRef.value.resetFields()
|
||||
dialogFormVisible.value = false
|
||||
}
|
||||
// 二维码
|
||||
const qrCode = (item: any) => {
|
||||
deivce.value = item
|
||||
deivce.value.qrPath = localStorage.getItem('STATIC_URL') + deivce.value.qrPath
|
||||
setTimeout(() => {
|
||||
html2canvas(document.querySelector('.qrcode-label'), {
|
||||
useCORS: true
|
||||
}).then(canvas => {
|
||||
let url = canvas.toDataURL('image/png')
|
||||
// 下载图片
|
||||
let a = document.createElement('a')
|
||||
let event = new MouseEvent('click')
|
||||
a.href = url
|
||||
a.download = item.mac + '.png'
|
||||
a.dispatchEvent(event)
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
// 出厂设置
|
||||
const reset = (id: string) => {
|
||||
ElMessageBox.confirm('确定该设备恢复出厂吗?', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
resetEquipmentDelivery(id).then(res => {
|
||||
ElMessage.success('恢复成功!')
|
||||
tableStore.onTableAction('search', {})
|
||||
})
|
||||
})
|
||||
}
|
||||
// 删除
|
||||
const deletes = (id: string) => {
|
||||
ElMessageBox.confirm('确定删除该设备吗?', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteEquipmentDelivery(id).then(res => {
|
||||
ElMessage.success('删除成功!')
|
||||
tableStore.onTableAction('search', {})
|
||||
})
|
||||
nextTick(() => {
|
||||
// 模拟待编辑数据
|
||||
let user = {
|
||||
cntractNo: '',
|
||||
devAccessMethod: 'mqtt',
|
||||
devModel: '',
|
||||
devType: '',
|
||||
name: '',
|
||||
ndid: ''
|
||||
}
|
||||
Object.assign(form, user)
|
||||
})
|
||||
}
|
||||
|
||||
const formDevTypeChange = (e: any) => {
|
||||
console.log(e)
|
||||
if (!e) {
|
||||
return
|
||||
}
|
||||
@@ -414,7 +445,9 @@ const formDevTypeChange = (e: any) => {
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 100)
|
||||
})
|
||||
|
||||
const addMenu = () => {}
|
||||
|
||||
Reference in New Issue
Block a user