更新设备详情查询
This commit is contained in:
parent
4cea486fe0
commit
f8c263ed6e
|
@ -9,7 +9,7 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "^2.0.6",
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
"@highlightjs/vue-plugin": "^2.1.0",
|
"@highlightjs/vue-plugin": "^2.1.0",
|
||||||
"@wangeditor/editor": "^5.1.12",
|
"@wangeditor/editor": "^5.1.12",
|
||||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||||
|
@ -564,9 +564,12 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@element-plus/icons-vue": {
|
"node_modules/@element-plus/icons-vue": {
|
||||||
"version": "2.0.6",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.6.tgz",
|
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
|
||||||
"integrity": "sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew=="
|
"integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^3.2.0"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/linux-loong64": {
|
"node_modules/@esbuild/linux-loong64": {
|
||||||
"version": "0.14.53",
|
"version": "0.14.53",
|
||||||
|
@ -7790,9 +7793,10 @@
|
||||||
"integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
|
"integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
|
||||||
},
|
},
|
||||||
"@element-plus/icons-vue": {
|
"@element-plus/icons-vue": {
|
||||||
"version": "2.0.6",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.6.tgz",
|
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
|
||||||
"integrity": "sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew=="
|
"integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
|
||||||
|
"requires": {}
|
||||||
},
|
},
|
||||||
"@esbuild/linux-loong64": {
|
"@esbuild/linux-loong64": {
|
||||||
"version": "0.14.53",
|
"version": "0.14.53",
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "^2.0.6",
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
"@highlightjs/vue-plugin": "^2.1.0",
|
"@highlightjs/vue-plugin": "^2.1.0",
|
||||||
"@wangeditor/editor": "^5.1.12",
|
"@wangeditor/editor": "^5.1.12",
|
||||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||||
|
|
|
@ -33,4 +33,9 @@ export function apiDeviceDelete(params: any) {
|
||||||
// 监测设备详情
|
// 监测设备详情
|
||||||
export function apiDeviceDetail(params: any) {
|
export function apiDeviceDetail(params: any) {
|
||||||
return request.get({ url: '/device.device/detail', params })
|
return request.get({ url: '/device.device/detail', params })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设备监控数据
|
||||||
|
export function apiDeviceMonitorData(params: any) {
|
||||||
|
return request.get({ url: '/device.device/monitorData', params })
|
||||||
}
|
}
|
|
@ -1,294 +1,206 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="edit-popup">
|
<div>
|
||||||
<popup
|
<el-card class="!border-none" shadow="never">
|
||||||
ref="popupRef"
|
<el-page-header content="设备详情" @back="$router.back()" />
|
||||||
:title="popupTitle"
|
</el-card>
|
||||||
:async="true"
|
<el-card class="!border-none mt-4 flex-1" shadow="never">
|
||||||
width="550px"
|
<template #header>
|
||||||
@confirm="handleSubmit"
|
<div>
|
||||||
@close="handleClose"
|
<span class="card-title">设备资料</span>
|
||||||
>
|
</div>
|
||||||
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
|
</template>
|
||||||
<el-form-item label="用户ID" prop="user_id">
|
<div class="flex flex-wrap">
|
||||||
<el-select
|
<div class="w-1/2 md:w-1/3 mb-4">
|
||||||
v-model="formData.user_id"
|
<div class="leading-10">所属土地:</div>
|
||||||
filterable
|
<div class="text-3xl text-tx-secondary">ID:{{ deviceData.device.land_id }} / 名称:{{ deviceData.device.land_title }}</div>
|
||||||
remote
|
</div>
|
||||||
reserve-keyword
|
<div class="w-1/2 md:w-1/3 mb-4">
|
||||||
placeholder="请输入用户信息"
|
<div class="leading-10">所属产品:</div>
|
||||||
:remote-method="queryUser"
|
<div class="text-3xl text-tx-secondary">ID:{{ deviceData.device.product_id }} / 名称:{{ deviceData.device.land_title }}</div>
|
||||||
:loading="loading"
|
</div>
|
||||||
>
|
</div>
|
||||||
<el-option
|
<div class="flex flex-wrap">
|
||||||
v-for="item in userOptions"
|
<div class="w-1/2 md:w-1/6 mb-4">
|
||||||
:key="item.value"
|
<div class="leading-10">设备名称:</div>
|
||||||
:label="item.label"
|
<div class="text-3xl text-tx-secondary">{{ deviceData.device.name }}</div>
|
||||||
:value="item.value"
|
</div>
|
||||||
/>
|
<div class="w-1/2 md:w-1/6 mb-4">
|
||||||
</el-select>
|
<div class="leading-10">设备编码:</div>
|
||||||
</el-form-item>
|
<div class="text-3xl text-tx-secondary">{{ deviceData.device.code }}</div>
|
||||||
<el-form-item label="产品ID" prop="product_id">
|
</div>
|
||||||
<el-select
|
<div class="w-1/2 md:w-1/6 mb-4">
|
||||||
v-model="formData.product_id"
|
<div class="leading-10">设备类型:</div>
|
||||||
filterable
|
<div class="text-3xl text-tx-secondary">
|
||||||
remote
|
<dict-value :options="dictData.device_type" :value="deviceData.device.type" />
|
||||||
reserve-keyword
|
</div>
|
||||||
placeholder="请输入产品信息"
|
</div>
|
||||||
:remote-method="queryProduct"
|
<div class="w-1/2 md:w-1/6 mb-4">
|
||||||
:loading="loading"
|
<div class="leading-10">设备状态:</div>
|
||||||
>
|
<div class="text-3xl text-tx-secondary">
|
||||||
<el-option
|
<dict-value :options="dictData.device_status" :value="deviceData.device.status" />
|
||||||
v-for="item in productOptions"
|
</div>
|
||||||
:key="item.value"
|
</div>
|
||||||
:label="item.label"
|
<div class="w-1/2 md:w-1/6 mb-4">
|
||||||
:value="item.value"
|
<div class="leading-10">是否在线:</div>
|
||||||
/>
|
<div class="text-3xl text-tx-secondary">
|
||||||
</el-select>
|
<dict-value :options="dictData.device_online_status" :value="deviceData.device.is_online" />
|
||||||
</el-form-item>
|
</div>
|
||||||
<el-form-item label="设备编码" prop="code">
|
</div>
|
||||||
<el-input v-model="formData.code" clearable placeholder="请输入设备编码" />
|
<div class="w-1/2 md:w-1/6 mb-4">
|
||||||
</el-form-item>
|
<div class="leading-10">是否绑定产品:</div>
|
||||||
<el-form-item label="设备名称" prop="name">
|
<div class="text-3xl text-tx-secondary">
|
||||||
<el-input v-model="formData.name" clearable placeholder="请输入设备名称" />
|
<dict-value :options="dictData.device_bind_status" :value="deviceData.device.is_bind" />
|
||||||
</el-form-item>
|
</div>
|
||||||
<el-form-item label="设备类型" prop="type">
|
</div>
|
||||||
<el-select class="flex-1" v-model="formData.type" clearable placeholder="请选择设备类型">
|
</div>
|
||||||
<el-option
|
</el-card>
|
||||||
v-for="(item, index) in dictData.device_type"
|
|
||||||
:key="index"
|
<el-card class="!border-none mt-4 flex-1" shadow="never">
|
||||||
:label="item.name"
|
<el-tabs v-model="activeName" class="">
|
||||||
:value="parseInt(item.value)"
|
<el-tab-pane label="监控数据" name="monitor_item">
|
||||||
/>
|
<el-row :gutter="12">
|
||||||
</el-select>
|
<el-col :span="6" v-for="item in deviceData.monitor_item" :key="item">
|
||||||
</el-form-item>
|
<el-card shadow="always" class="mb-4">
|
||||||
<el-form-item label="监测项" prop="monitor_item">
|
<div class="flex justify-between mb-2">
|
||||||
<el-select class="flex-1" v-model="formData.monitor_item" multiple clearable placeholder="请选择设备监测项">
|
<div class="mt-2 text-sm text-tx-secondary">{{ item.name }}</div>
|
||||||
<el-option
|
<div class="mt-2 text-sm text-tx-secondary" @click="handleClick(item.device_id, item.value)">
|
||||||
v-for="(item, index) in dictData.monitor_item"
|
历史数据
|
||||||
:key="index"
|
</div>
|
||||||
:label="item.name"
|
</div>
|
||||||
:value="item.value"
|
|
||||||
/>
|
<div class="my-6 text-3xl">{{ item.monitor_value }}</div>
|
||||||
</el-select>
|
<div class="mt-2 text-sm text-tx-secondary"><el-tag class="mr-2" type="info">只读</el-tag>{{ item.last_time }}</div>
|
||||||
</el-form-item>
|
</el-card>
|
||||||
<el-form-item label="设备状态" prop="status">
|
</el-col>
|
||||||
<el-select class="flex-1" v-model="formData.status" clearable placeholder="请选择设备状态">
|
</el-row>
|
||||||
<el-option
|
</el-tab-pane>
|
||||||
v-for="(item, index) in dictData.device_status"
|
<el-tab-pane label="监控视频" name="monitor_video">监控视频</el-tab-pane>
|
||||||
:key="index"
|
</el-tabs>
|
||||||
:label="item.name"
|
</el-card>
|
||||||
:value="parseInt(item.value)"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否在线" prop="is_online">
|
|
||||||
<el-select class="flex-1" v-model="formData.is_online" clearable placeholder="请选择是否在线">
|
|
||||||
<el-option
|
|
||||||
v-for="(item, index) in dictData.device_online_status"
|
|
||||||
:key="index"
|
|
||||||
:label="item.name"
|
|
||||||
:value="parseInt(item.value)"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否绑定土地" prop="is_bind">
|
|
||||||
<el-select class="flex-1" v-model="formData.is_bind" clearable placeholder="请选择是否绑定土地">
|
|
||||||
<el-option
|
|
||||||
v-for="(item, index) in dictData.device_bind_status"
|
|
||||||
:key="index"
|
|
||||||
:label="item.name"
|
|
||||||
:value="parseInt(item.value)"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</popup>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<el-dialog v-model="dialogTableVisible" title="历史数据">
|
||||||
|
<el-table :data="monitorData.gridData">
|
||||||
|
<el-table-column property="id" label="ID" width="80" />
|
||||||
|
<el-table-column property="date" label="时间" width="250" />
|
||||||
|
<el-table-column property="value" label="数据" />
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
small
|
||||||
|
background
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:page-size="queryMonitorData.page_size"
|
||||||
|
:total="queryMonitorData.total"
|
||||||
|
class="mt-4"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
/>
|
||||||
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="deviceEdit">
|
<script lang="ts" setup name="deviceDetail">
|
||||||
import type { FormInstance } from 'element-plus'
|
import { ref } from 'vue'
|
||||||
import Popup from '@/components/popup/index.vue'
|
import { useDictData } from '@/hooks/useDictOptions'
|
||||||
import { apiDeviceAdd, apiDeviceEdit, apiDeviceDetail, getUserList, apiProductLists} from '@/api/device'
|
import { apiDeviceDetail, apiDeviceMonitorData } from '@/api/device'
|
||||||
import { timeFormat } from '@/utils/util'
|
import { timeFormat } from '@/utils/util'
|
||||||
import type { PropType } from 'vue'
|
const activeName = ref('monitor_item')
|
||||||
defineProps({
|
|
||||||
dictData: {
|
|
||||||
type: Object as PropType<Record<string, any[]>>,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const emit = defineEmits(['success', 'close'])
|
|
||||||
const formRef = shallowRef<FormInstance>()
|
|
||||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
|
||||||
const mode = ref('add')
|
|
||||||
|
|
||||||
|
const deviceData: any = reactive({
|
||||||
// 弹窗标题
|
device: {},
|
||||||
const popupTitle = computed(() => {
|
monitor_item: []
|
||||||
return mode.value == 'edit' ? '编辑设备' : '新增设备'
|
|
||||||
})
|
})
|
||||||
|
|
||||||
// 表单数据
|
const queryMonitorData: any = reactive({
|
||||||
const formData = reactive({
|
device_id: '',
|
||||||
id: '',
|
monitor_type: '',
|
||||||
user_id: '',
|
page_no: 1,
|
||||||
product_id: '',
|
page_size: 15,
|
||||||
code: '',
|
total: ''
|
||||||
name: '',
|
|
||||||
type: '',
|
|
||||||
monitor_item: '',
|
|
||||||
status: '',
|
|
||||||
is_online: '',
|
|
||||||
is_bind: '',
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const { dictData } = useDictData('device_type,device_status,device_online_status,device_bind_status,monitor_item')
|
||||||
|
|
||||||
// 表单验证
|
const route = useRoute()
|
||||||
const formRules = reactive<any>({
|
const getDetails = async () => {
|
||||||
user_id: [{
|
apiDeviceDetail({
|
||||||
required: true,
|
id: route.query.device_id
|
||||||
message: '请输入用户ID',
|
|
||||||
trigger: ['blur']
|
|
||||||
}],
|
|
||||||
product_id: [{
|
|
||||||
required: true,
|
|
||||||
message: '请输入产品id',
|
|
||||||
trigger: ['blur']
|
|
||||||
}],
|
|
||||||
code: [{
|
|
||||||
required: true,
|
|
||||||
message: '请输入设备编码',
|
|
||||||
trigger: ['blur']
|
|
||||||
}],
|
|
||||||
name: [{
|
|
||||||
required: true,
|
|
||||||
message: '请输入设备名称',
|
|
||||||
trigger: ['blur']
|
|
||||||
}],
|
|
||||||
type: [{
|
|
||||||
required: true,
|
|
||||||
message: '请选择设备类型',
|
|
||||||
trigger: ['blur']
|
|
||||||
}],
|
|
||||||
monitor_item: [{
|
|
||||||
required: true,
|
|
||||||
message: '请选择设备监测项',
|
|
||||||
trigger: ['blur']
|
|
||||||
}],
|
|
||||||
status: [{
|
|
||||||
required: true,
|
|
||||||
message: '请选择设备状态',
|
|
||||||
trigger: ['blur']
|
|
||||||
}],
|
|
||||||
is_online: [{
|
|
||||||
required: true,
|
|
||||||
message: '请选择是否在线',
|
|
||||||
trigger: ['blur']
|
|
||||||
}],
|
|
||||||
is_bind: [{
|
|
||||||
required: true,
|
|
||||||
message: '请选择是否绑定土地',
|
|
||||||
trigger: ['blur']
|
|
||||||
}],
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// 获取详情
|
|
||||||
const setFormData = async (data: Record<any, any>) => {
|
|
||||||
for (const key in formData) {
|
|
||||||
if (data[key] != null && data[key] != undefined) {
|
|
||||||
//@ts-ignore
|
|
||||||
formData[key] = data[key]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log(dictData.monitor_item)
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ListItem {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
const productOptions = ref<ListItem[]>([])
|
|
||||||
const userOptions = ref<ListItem[]>([])
|
|
||||||
const loading = ref(false)
|
|
||||||
|
|
||||||
const queryUser = async (query: string) => {
|
|
||||||
if (query) {
|
|
||||||
loading.value = true
|
|
||||||
const userList = await getUserList({
|
|
||||||
keyword: query
|
|
||||||
})
|
|
||||||
loading.value = false
|
|
||||||
if (userList.count > 0) {
|
|
||||||
userOptions.value = userList.lists.map((user: any) => {
|
|
||||||
return { value: `${user.id}`, label: `ID: ${user.id} / 账户: ${user.account}` }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
userOptions.value = []
|
|
||||||
}
|
|
||||||
loading.value = false
|
|
||||||
} else {
|
|
||||||
userOptions.value = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const queryProduct = async (query: string) => {
|
|
||||||
if (query) {
|
|
||||||
loading.value = true
|
|
||||||
const productList = await apiProductLists({
|
|
||||||
name: query
|
|
||||||
})
|
|
||||||
loading.value = false
|
|
||||||
if (productList.count > 0) {
|
|
||||||
productOptions.value = productList.lists.map((product: any) => {
|
|
||||||
return { value: `${product.id}`, label: `ID: ${product.id} / 名称: ${product.name}` }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
productOptions.value = []
|
|
||||||
}
|
|
||||||
loading.value = false
|
|
||||||
} else {
|
|
||||||
productOptions.value = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const getDetail = async (row: Record<string, any>) => {
|
|
||||||
const data = await apiDeviceDetail({
|
|
||||||
id: row.id
|
|
||||||
})
|
})
|
||||||
setFormData(data)
|
.then((res: any) => {
|
||||||
|
deviceData.device.name = res.name
|
||||||
|
deviceData.device.code = res.code
|
||||||
|
deviceData.device.type = res.type
|
||||||
|
deviceData.device.status = res.status
|
||||||
|
deviceData.device.is_online = res.is_online
|
||||||
|
deviceData.device.is_bind = res.is_bind
|
||||||
|
deviceData.device.land_id = res.land_id
|
||||||
|
deviceData.device.land_title = res.land_title
|
||||||
|
deviceData.device.product_id = res.product_id
|
||||||
|
deviceData.device.product_name = res.product_name
|
||||||
|
deviceData.monitor_item = res.monitor_item
|
||||||
|
})
|
||||||
|
.catch((err: any) => {
|
||||||
|
console.log('err', err)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
getDetails()
|
||||||
|
|
||||||
|
const dialogTableVisible = ref(false)
|
||||||
// 提交按钮
|
const monitorData = reactive({
|
||||||
const handleSubmit = async () => {
|
gridData: [{}]
|
||||||
await formRef.value?.validate()
|
|
||||||
const data = { ...formData, }
|
|
||||||
mode.value == 'edit'
|
|
||||||
? await apiDeviceEdit(data)
|
|
||||||
: await apiDeviceAdd(data)
|
|
||||||
popupRef.value?.close()
|
|
||||||
emit('success')
|
|
||||||
}
|
|
||||||
|
|
||||||
//打开弹窗
|
|
||||||
const open = (type = 'add') => {
|
|
||||||
mode.value = type
|
|
||||||
popupRef.value?.open()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 关闭回调
|
|
||||||
const handleClose = () => {
|
|
||||||
emit('close')
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
open,
|
|
||||||
setFormData,
|
|
||||||
getDetail
|
|
||||||
})
|
})
|
||||||
</script>
|
|
||||||
|
const handleClick = (id: any, type: any) => {
|
||||||
|
monitorData.gridData = [{}]
|
||||||
|
queryMonitorData.device_id = id
|
||||||
|
queryMonitorData.monitor_type = type
|
||||||
|
apiDeviceMonitorData({
|
||||||
|
id: id,
|
||||||
|
monitor_type: type,
|
||||||
|
page_no: queryMonitorData.page_no,
|
||||||
|
page_size: queryMonitorData.page_size
|
||||||
|
})
|
||||||
|
.then((res: any) => {
|
||||||
|
dialogTableVisible.value = true
|
||||||
|
queryMonitorData.total = res.count
|
||||||
|
res.lists.map((data: any) => {
|
||||||
|
queryMonitorData.total = res.count
|
||||||
|
monitorData.gridData.push({
|
||||||
|
id: data.id,
|
||||||
|
date: data.create_time
|
||||||
|
? timeFormat(data.create_time, 'yyyy-mm-dd hh:MM:ss')
|
||||||
|
: '',
|
||||||
|
value: data.monitor_value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch((err: any) => {
|
||||||
|
console.log('err', err)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCurrentChange = (val: number) => {
|
||||||
|
console.log(`current page: ${val}`)
|
||||||
|
monitorData.gridData = [{}]
|
||||||
|
apiDeviceMonitorData({
|
||||||
|
id: queryMonitorData.device_id,
|
||||||
|
monitor_type: queryMonitorData.monitor_type,
|
||||||
|
page_no: val,
|
||||||
|
page_size: queryMonitorData.page_size
|
||||||
|
})
|
||||||
|
.then((res: any) => {
|
||||||
|
dialogTableVisible.value = true
|
||||||
|
queryMonitorData.total = res.count
|
||||||
|
res.lists.map((data: any) => {
|
||||||
|
monitorData.gridData.push({
|
||||||
|
id: data.id,
|
||||||
|
date: data.create_time
|
||||||
|
? timeFormat(data.create_time, 'yyyy-mm-dd hh:MM:ss')
|
||||||
|
: '',
|
||||||
|
value: data.monitor_value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch((err: any) => {
|
||||||
|
console.log('err', err)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -202,7 +202,6 @@ const setFormData = async (data: Record<any, any>) => {
|
||||||
formData[key] = data[key]
|
formData[key] = data[key]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(dictData.monitor_item)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ListItem {
|
interface ListItem {
|
||||||
|
|
|
@ -291,10 +291,10 @@
|
||||||
resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
|
resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
|
||||||
integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
|
integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
|
||||||
|
|
||||||
"@element-plus/icons-vue@^2.0.6":
|
"@element-plus/icons-vue@^2.0.6", "@element-plus/icons-vue@^2.3.1":
|
||||||
version "2.0.6"
|
version "2.3.1"
|
||||||
resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.6.tgz"
|
resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz"
|
||||||
integrity sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew==
|
integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
|
||||||
|
|
||||||
"@eslint/eslintrc@^1.3.0":
|
"@eslint/eslintrc@^1.3.0":
|
||||||
version "1.3.0"
|
version "1.3.0"
|
||||||
|
@ -4293,7 +4293,7 @@ vue-tsc@^0.38.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
"@volar/vue-typescript" "0.38.9"
|
"@volar/vue-typescript" "0.38.9"
|
||||||
|
|
||||||
vue@^3.2.2, vue@^3.2.37:
|
vue@^3.2.0, vue@^3.2.2, vue@^3.2.37:
|
||||||
version "3.2.37"
|
version "3.2.37"
|
||||||
resolved "https://registry.npmmirror.com/vue/-/vue-3.2.37.tgz"
|
resolved "https://registry.npmmirror.com/vue/-/vue-3.2.37.tgz"
|
||||||
integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==
|
integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==
|
||||||
|
|
|
@ -104,5 +104,17 @@ class DeviceController extends BaseAdminController
|
||||||
return $this->data($result);
|
return $this->data($result);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @notes 获取详情
|
||||||
|
* @return \think\response\Json
|
||||||
|
* @author likeadmin
|
||||||
|
* @date 2023/11/24 15:30
|
||||||
|
*/
|
||||||
|
public function monitorData()
|
||||||
|
{
|
||||||
|
$params = (new DeviceValidate())->goCheck('monitorData');
|
||||||
|
$result = DeviceLogic::monitorData($params);
|
||||||
|
return $this->data($result);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -17,9 +17,9 @@ namespace app\adminapi\logic\device;
|
||||||
|
|
||||||
use app\common\model\device\Device;
|
use app\common\model\device\Device;
|
||||||
use app\common\logic\BaseLogic;
|
use app\common\logic\BaseLogic;
|
||||||
|
use think\facade\Config;
|
||||||
use think\facade\Db;
|
use think\facade\Db;
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Device逻辑
|
* Device逻辑
|
||||||
* Class DeviceLogic
|
* Class DeviceLogic
|
||||||
|
@ -138,6 +138,54 @@ class DeviceLogic extends BaseLogic
|
||||||
*/
|
*/
|
||||||
public static function detail($params): array
|
public static function detail($params): array
|
||||||
{
|
{
|
||||||
return Device::findOrEmpty($params['id'])->toArray();
|
$detail = Db::name('device')->alias('d')
|
||||||
|
->where('d.id', $params['id'])
|
||||||
|
->leftJoin('user u','u.id = d.user_id')
|
||||||
|
->leftJoin('product_device pd','pd.device_id = d.id')
|
||||||
|
->leftJoin('product p','p.id = pd.product_id')
|
||||||
|
->leftJoin('land_product lp','lp.product_id = pd.product_id')
|
||||||
|
->leftJoin('land l','l.id = lp.land_id')
|
||||||
|
->field('d.*, u.account, pd.product_id, p.name as product_name, lp.land_id, l.title as land_title')
|
||||||
|
->findOrEmpty();
|
||||||
|
|
||||||
|
$monitorItemArray = [];
|
||||||
|
if (!empty($detail['monitor_item'])) {
|
||||||
|
$monitorItemArray = explode(',', $detail['monitor_item']);
|
||||||
|
}
|
||||||
|
$dictTypeId = Db::name('dict_type')->where('type', 'monitor_item')->value('id');
|
||||||
|
$monitorItemArray = Db::name('dict_data')->where('type_id', $dictTypeId)->whereIn('value', $monitorItemArray)->field(['name', 'value'])->select()->toArray();
|
||||||
|
foreach($monitorItemArray as $k=>$v) {
|
||||||
|
$monitorItemArray[$k]['device_id'] = $params['id'];
|
||||||
|
$monitorItemArray[$k]['monitor_value'] = '-';
|
||||||
|
$monitorItemArray[$k]['last_time'] = '-';
|
||||||
|
$monitorData = Db::name('device_monitor_data')->where('device_id', $params['id'])->where('monitor_item', $v['value'])->order(['id' => 'desc'])->find();
|
||||||
|
if (!empty($monitorData)) {
|
||||||
|
$monitorItemArray[$k]['monitor_value'] = $monitorData['monitor_value'];
|
||||||
|
$monitorItemArray[$k]['last_time'] = date('Y-m-d H:i:s', $monitorData['create_time']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$detail['monitor_item'] = $monitorItemArray;
|
||||||
|
return $detail;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static function monitorData($params): array
|
||||||
|
{
|
||||||
|
$pageSizeMax = Config::get('project.lists.page_size_max');
|
||||||
|
$pageSize = Config::get('project.lists.page_size');
|
||||||
|
$pageNo = $page_no = request()->get('page_no', 1) ?: 1;
|
||||||
|
$pageSize = $page_size = request()->get('page_size', $pageSize) ?: $pageSize;
|
||||||
|
|
||||||
|
$limitOffset = ($pageNo - 1) * $pageSize;
|
||||||
|
$limitLength = $pageSize;
|
||||||
|
$where['device_id'] = $params['id'];
|
||||||
|
$where['monitor_item'] = $params['monitor_type'];
|
||||||
|
$lists = Db::name('device_monitor_data')
|
||||||
|
->where($where)
|
||||||
|
->limit($limitOffset, $limitLength)
|
||||||
|
->order(['id' => 'desc'])
|
||||||
|
->select()
|
||||||
|
->toArray();
|
||||||
|
$count = Db::name('device_monitor_data')->where($where)->count();
|
||||||
|
return compact('lists', 'count', 'page_no', 'page_size');
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -35,6 +35,7 @@ class DeviceValidate extends BaseValidate
|
||||||
'code' => 'require',
|
'code' => 'require',
|
||||||
'name' => 'require',
|
'name' => 'require',
|
||||||
'type' => 'require',
|
'type' => 'require',
|
||||||
|
'monitor_type' => 'require',
|
||||||
'status' => 'require',
|
'status' => 'require',
|
||||||
'is_online' => 'require',
|
'is_online' => 'require',
|
||||||
'is_bind' => 'require',
|
'is_bind' => 'require',
|
||||||
|
@ -103,4 +104,15 @@ class DeviceValidate extends BaseValidate
|
||||||
return $this->only(['id']);
|
return $this->only(['id']);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @notes 详情场景
|
||||||
|
* @return DeviceValidate
|
||||||
|
* @author likeadmin
|
||||||
|
* @date 2023/11/24 15:30
|
||||||
|
*/
|
||||||
|
public function sceneMonitorData()
|
||||||
|
{
|
||||||
|
return $this->only(['id', 'monitor_type']);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue