更新设备详情查询

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",
"license": "MIT",
"dependencies": {
"@element-plus/icons-vue": "^2.0.6",
"@element-plus/icons-vue": "^2.3.1",
"@highlightjs/vue-plugin": "^2.1.0",
"@wangeditor/editor": "^5.1.12",
"@wangeditor/editor-for-vue": "^5.1.12",
@ -564,9 +564,12 @@
}
},
"node_modules/@element-plus/icons-vue": {
"version": "2.0.6",
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.6.tgz",
"integrity": "sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew=="
"version": "2.3.1",
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
"integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/@esbuild/linux-loong64": {
"version": "0.14.53",
@ -7790,9 +7793,10 @@
"integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
},
"@element-plus/icons-vue": {
"version": "2.0.6",
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.6.tgz",
"integrity": "sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew=="
"version": "2.3.1",
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
"integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
"requires": {}
},
"@esbuild/linux-loong64": {
"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"
},
"dependencies": {
"@element-plus/icons-vue": "^2.0.6",
"@element-plus/icons-vue": "^2.3.1",
"@highlightjs/vue-plugin": "^2.1.0",
"@wangeditor/editor": "^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) {
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>
<div class="edit-popup">
<popup
ref="popupRef"
:title="popupTitle"
:async="true"
width="550px"
@confirm="handleSubmit"
@close="handleClose"
>
<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>
<el-card class="!border-none" shadow="never">
<el-page-header content="设备详情" @back="$router.back()" />
</el-card>
<el-card class="!border-none mt-4 flex-1" shadow="never">
<template #header>
<div>
<span class="card-title">设备资料</span>
</div>
</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">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiDeviceAdd, apiDeviceEdit, apiDeviceDetail, getUserList, apiProductLists} from '@/api/device'
<el-card class="!border-none mt-4 flex-1" shadow="never">
<el-tabs v-model="activeName" class="">
<el-tab-pane label="监控数据" name="monitor_item">
<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 type { PropType } from 'vue'
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 activeName = ref('monitor_item')
//
const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑设备' : '新增设备'
const deviceData: any = reactive({
device: {},
monitor_item: []
})
//
const formData = reactive({
id: '',
user_id: '',
product_id: '',
code: '',
name: '',
type: '',
monitor_item: '',
status: '',
is_online: '',
is_bind: '',
const queryMonitorData: any = reactive({
device_id: '',
monitor_type: '',
page_no: 1,
page_size: 15,
total: ''
})
const { dictData } = useDictData('device_type,device_status,device_online_status,device_bind_status,monitor_item')
//
const formRules = reactive<any>({
user_id: [{
required: true,
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 route = useRoute()
const getDetails = async () => {
apiDeviceDetail({
id: route.query.device_id
})
.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({
gridData: [{}]
})
//
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
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
})
loading.value = false
if (userList.count > 0) {
userOptions.value = userList.lists.map((user: any) => {
return { value: `${user.id}`, label: `ID: ${user.id} / 账户: ${user.account}` }
.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
})
} 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
.catch((err: any) => {
console.log('err', err)
})
setFormData(data)
}
//
const handleSubmit = async () => {
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
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>

View File

@ -202,7 +202,6 @@ const setFormData = async (data: Record<any, any>) => {
formData[key] = data[key]
}
}
console.log(dictData.monitor_item)
}
interface ListItem {

View File

@ -291,10 +291,10 @@
resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
"@element-plus/icons-vue@^2.0.6":
version "2.0.6"
resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.6.tgz"
integrity sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew==
"@element-plus/icons-vue@^2.0.6", "@element-plus/icons-vue@^2.3.1":
version "2.3.1"
resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz"
integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
"@eslint/eslintrc@^1.3.0":
version "1.3.0"
@ -4293,7 +4293,7 @@ vue-tsc@^0.38.1:
dependencies:
"@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"
resolved "https://registry.npmmirror.com/vue/-/vue-3.2.37.tgz"
integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==

View File

@ -104,5 +104,17 @@ class DeviceController extends BaseAdminController
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\logic\BaseLogic;
use think\facade\Config;
use think\facade\Db;
/**
* Device逻辑
* Class DeviceLogic
@ -138,6 +138,54 @@ class DeviceLogic extends BaseLogic
*/
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',
'name' => 'require',
'type' => 'require',
'monitor_type' => 'require',
'status' => 'require',
'is_online' => 'require',
'is_bind' => 'require',
@ -103,4 +104,15 @@ class DeviceValidate extends BaseValidate
return $this->only(['id']);
}
/**
* @notes 详情场景
* @return DeviceValidate
* @author likeadmin
* @date 2023/11/24 15:30
*/
public function sceneMonitorData()
{
return $this->only(['id', 'monitor_type']);
}
}