更新设备详情查询

This commit is contained in:
yaooo 2023-11-29 15:30:59 +08:00
parent 4cea486fe0
commit f8c263ed6e
9 changed files with 287 additions and 295 deletions

View File

@ -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",

View File

@ -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",

View File

@ -34,3 +34,8 @@ 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 })
}

View File

@ -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>
>
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
<el-form-item label="用户ID" prop="user_id">
<el-select
v-model="formData.user_id"
filterable
remote
reserve-keyword
placeholder="请输入用户信息"
:remote-method="queryUser"
:loading="loading"
>
<el-option
v-for="item in userOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="产品ID" prop="product_id">
<el-select
v-model="formData.product_id"
filterable
remote
reserve-keyword
placeholder="请输入产品信息"
:remote-method="queryProduct"
:loading="loading"
>
<el-option
v-for="item in productOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="设备编码" prop="code">
<el-input v-model="formData.code" clearable placeholder="请输入设备编码" />
</el-form-item>
<el-form-item label="设备名称" prop="name">
<el-input v-model="formData.name" clearable placeholder="请输入设备名称" />
</el-form-item>
<el-form-item label="设备类型" prop="type">
<el-select class="flex-1" v-model="formData.type" clearable placeholder="请选择设备类型">
<el-option
v-for="(item, index) in dictData.device_type"
:key="index"
:label="item.name"
:value="parseInt(item.value)"
/>
</el-select>
</el-form-item>
<el-form-item label="监测项" prop="monitor_item">
<el-select class="flex-1" v-model="formData.monitor_item" multiple clearable placeholder="请选择设备监测项">
<el-option
v-for="(item, index) in dictData.monitor_item"
:key="index"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="设备状态" prop="status">
<el-select class="flex-1" v-model="formData.status" clearable placeholder="请选择设备状态">
<el-option
v-for="(item, index) in dictData.device_status"
:key="index"
:label="item.name"
: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>
</template> </template>
<div class="flex flex-wrap">
<div class="w-1/2 md:w-1/3 mb-4">
<div class="leading-10">所属土地</div>
<div class="text-3xl text-tx-secondary">ID{{ deviceData.device.land_id }} / 名称{{ deviceData.device.land_title }}</div>
</div>
<div class="w-1/2 md:w-1/3 mb-4">
<div class="leading-10">所属产品</div>
<div class="text-3xl text-tx-secondary">ID{{ deviceData.device.product_id }} / 名称{{ deviceData.device.land_title }}</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-1/2 md:w-1/6 mb-4">
<div class="leading-10">设备名称</div>
<div class="text-3xl text-tx-secondary">{{ deviceData.device.name }}</div>
</div>
<div class="w-1/2 md:w-1/6 mb-4">
<div class="leading-10">设备编码</div>
<div class="text-3xl text-tx-secondary">{{ deviceData.device.code }}</div>
</div>
<div class="w-1/2 md:w-1/6 mb-4">
<div class="leading-10">设备类型</div>
<div class="text-3xl text-tx-secondary">
<dict-value :options="dictData.device_type" :value="deviceData.device.type" />
</div>
</div>
<div class="w-1/2 md:w-1/6 mb-4">
<div class="leading-10">设备状态</div>
<div class="text-3xl text-tx-secondary">
<dict-value :options="dictData.device_status" :value="deviceData.device.status" />
</div>
</div>
<div class="w-1/2 md:w-1/6 mb-4">
<div class="leading-10">是否在线</div>
<div class="text-3xl text-tx-secondary">
<dict-value :options="dictData.device_online_status" :value="deviceData.device.is_online" />
</div>
</div>
<div class="w-1/2 md:w-1/6 mb-4">
<div class="leading-10">是否绑定产品</div>
<div class="text-3xl text-tx-secondary">
<dict-value :options="dictData.device_bind_status" :value="deviceData.device.is_bind" />
</div>
</div>
</div>
</el-card>
<script lang="ts" setup name="deviceEdit"> <el-card class="!border-none mt-4 flex-1" shadow="never">
import type { FormInstance } from 'element-plus' <el-tabs v-model="activeName" class="">
import Popup from '@/components/popup/index.vue' <el-tab-pane label="监控数据" name="monitor_item">
import { apiDeviceAdd, apiDeviceEdit, apiDeviceDetail, getUserList, apiProductLists} from '@/api/device' <el-row :gutter="12">
<el-col :span="6" v-for="item in deviceData.monitor_item" :key="item">
<el-card shadow="always" class="mb-4">
<div class="flex justify-between mb-2">
<div class="mt-2 text-sm text-tx-secondary">{{ item.name }}</div>
<div class="mt-2 text-sm text-tx-secondary" @click="handleClick(item.device_id, item.value)">
历史数据
</div>
</div>
<div class="my-6 text-3xl">{{ item.monitor_value }}</div>
<div class="mt-2 text-sm text-tx-secondary"><el-tag class="mr-2" type="info">只读</el-tag>{{ item.last_time }}</div>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="监控视频" name="monitor_video">监控视频</el-tab-pane>
</el-tabs>
</el-card>
</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>
<script lang="ts" setup name="deviceDetail">
import { ref } from 'vue'
import { useDictData } from '@/hooks/useDictOptions'
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'] .then((res: any) => {
}], deviceData.device.name = res.name
product_id: [{ deviceData.device.code = res.code
required: true, deviceData.device.type = res.type
message: '请输入产品id', deviceData.device.status = res.status
trigger: ['blur'] deviceData.device.is_online = res.is_online
}], deviceData.device.is_bind = res.is_bind
code: [{ deviceData.device.land_id = res.land_id
required: true, deviceData.device.land_title = res.land_title
message: '请输入设备编码', deviceData.device.product_id = res.product_id
trigger: ['blur'] deviceData.device.product_name = res.product_name
}], deviceData.monitor_item = res.monitor_item
name: [{ })
required: true, .catch((err: any) => {
message: '请输入设备名称', console.log('err', err)
trigger: ['blur'] })
}], }
type: [{ getDetails()
required: true,
message: '请选择设备类型', const dialogTableVisible = ref(false)
trigger: ['blur'] const monitorData = reactive({
}], gridData: [{}]
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 handleClick = (id: any, type: any) => {
// monitorData.gridData = [{}]
const setFormData = async (data: Record<any, any>) => { queryMonitorData.device_id = id
for (const key in formData) { queryMonitorData.monitor_type = type
if (data[key] != null && data[key] != undefined) { apiDeviceMonitorData({
//@ts-ignore id: id,
formData[key] = data[key] monitor_type: type,
} page_no: queryMonitorData.page_no,
} page_size: queryMonitorData.page_size
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 .then((res: any) => {
if (userList.count > 0) { dialogTableVisible.value = true
userOptions.value = userList.lists.map((user: any) => { queryMonitorData.total = res.count
return { value: `${user.id}`, label: `ID: ${user.id} / 账户: ${user.account}` } 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
}) })
} 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 { .catch((err: any) => {
productOptions.value = [] console.log('err', err)
}
loading.value = false
} else {
productOptions.value = []
}
}
const getDetail = async (row: Record<string, any>) => {
const data = await apiDeviceDetail({
id: row.id
}) })
setFormData(data)
} }
const handleCurrentChange = (val: number) => {
// console.log(`current page: ${val}`)
const handleSubmit = async () => { monitorData.gridData = [{}]
await formRef.value?.validate() apiDeviceMonitorData({
const data = { ...formData, } id: queryMonitorData.device_id,
mode.value == 'edit' monitor_type: queryMonitorData.monitor_type,
? await apiDeviceEdit(data) page_no: val,
: await apiDeviceAdd(data) page_size: queryMonitorData.page_size
popupRef.value?.close()
emit('success')
}
//
const open = (type = 'add') => {
mode.value = type
popupRef.value?.open()
}
//
const handleClose = () => {
emit('close')
}
defineExpose({
open,
setFormData,
getDetail
}) })
.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> </script>

View File

@ -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 {

View File

@ -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==

View File

@ -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);
}
} }

View File

@ -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');
} }
} }

View File

@ -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']);
}
} }