更新后台管理

This commit is contained in:
yaooo 2023-11-25 11:15:39 +08:00
parent 963ecaa64b
commit 92497c8e41
5 changed files with 171 additions and 150 deletions

View File

@ -9,7 +9,7 @@
<el-form-item label="设备ID" prop="device_id">
<el-input class="w-[280px]" v-model="queryParams.device_id" clearable placeholder="请输入设备ID" />
</el-form-item>
<el-form-item label="创建时间" prop="create_time">
<el-form-item label="监测时间" prop="create_time">
<daterange-picker
v-model:startTime="queryParams.start_time"
v-model:endTime="queryParams.end_time"
@ -36,16 +36,12 @@
<el-table-column label="大气压强" prop="pressure" show-overflow-tooltip />
<el-table-column label="降雨量" prop="rainfall" show-overflow-tooltip />
<el-table-column label="光照强度" prop="light_intensity" show-overflow-tooltip />
<el-table-column label="创建时间" prop="create_time" show-overflow-tooltip />
<el-table-column label="操作" width="120" fixed="right">
<el-table-column label="监测时间" width="160" prop="create_time" show-overflow-tooltip />
<el-table-column label="操作" width="140" align="center" fixed="right">
<template #default="{ row }">
<el-button
v-perms="['device.air_monitor/edit']"
type="primary"
link
@click="handleEdit(row)"
<el-button text @click="handleDetail(row)"
>
编辑
详情
</el-button>
<el-button
v-perms="['device.air_monitor/delete']"
@ -65,6 +61,13 @@
</el-card>
<edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
</div>
<el-dialog v-model="dialogTableVisible" title="空气监测数据">
<el-table :data="detailData.gridData">
<el-table-column property="item" label="监测项" width="150" />
<el-table-column property="value" label="监测数据" />
</el-table>
</el-dialog>
</template>
<script lang="ts" setup name="airMonitorLists">
@ -83,7 +86,8 @@ const showEdit = ref(false)
//
const queryParams = reactive({
device_id: '',
create_time: '',
start_time: '',
end_time: ''
})
//
@ -103,6 +107,53 @@ const { pager, getLists, resetParams, resetPage } = usePaging({
params: queryParams
})
const dialogTableVisible = ref(false)
const detailData = reactive({
gridData : [{}]
})
//
const handleDetail = (data: any) => {
detailData.gridData = [{}]
detailData.gridData.unshift({
item: '光照强度',
value: data.light_intensity
})
detailData.gridData.unshift({
item: '降雨量',
value: data.rainfall
})
detailData.gridData.unshift({
item: '大气压强',
value: data.pressure
})
detailData.gridData.unshift({
item: '二氧化碳含量',
value: data.co2_content
})
detailData.gridData.unshift({
item: '空气湿度',
value: data.moisture
})
detailData.gridData.unshift({
item: '空气温度',
value: data.temperature
})
detailData.gridData.unshift({
item: '风速',
value: data.wind_speed
})
detailData.gridData.unshift({
item: '风向',
value: data.wind_direction
})
detailData.gridData.unshift({
item: '设备ID',
value: data.device_id
})
dialogTableVisible.value = true
}
//
const handleAdd = async () => {
showEdit.value = true

View File

@ -80,7 +80,7 @@ const mode = ref('add')
//
const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑监测设备' : '新增监测设备'
return mode.value == 'edit' ? '编辑设备' : '新增设备'
})
//

View File

@ -51,15 +51,11 @@
<span>{{ row.create_time ? timeFormat(row.plant_date, 'yyyy-mm-dd hh:MM:ss') : '' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<el-table-column label="操作" width="140" align="center" fixed="right">
<template #default="{ row }">
<el-button
v-perms="['device.monitor_alarm/edit']"
type="primary"
link
@click="handleEdit(row)"
<el-button text @click="handleDetail(row)"
>
编辑
详情
</el-button>
<el-button
v-perms="['device.monitor_alarm/delete']"
@ -79,6 +75,13 @@
</el-card>
<edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
</div>
<el-dialog v-model="dialogTableVisible" title="监测报警数据">
<el-table :data="detailData.gridData">
<el-table-column property="item" label="监测项" width="150" />
<el-table-column property="value" label="监测数据" />
</el-table>
</el-dialog>
</template>
<script lang="ts" setup name="monitorAlarmLists">
@ -117,6 +120,44 @@ const { pager, getLists, resetParams, resetPage } = usePaging({
params: queryParams
})
const dialogTableVisible = ref(false)
const detailData = reactive({
gridData : [{}]
})
//
const handleDetail = (data: any) => {
detailData.gridData = [{}]
let deviceType = ''
for (const key in dictData['alarm_type']) {
if (dictData['alarm_type'][key]['value'] == data.type) {
deviceType = dictData['alarm_type'][key]['name']
}
}
detailData.gridData.unshift({
item: '解决方案',
value: data.solution
})
detailData.gridData.unshift({
item: '报警数值',
value: data.value
})
detailData.gridData.unshift({
item: '报警内容',
value: data.content
})
detailData.gridData.unshift({
item: '监测类型',
value: deviceType
})
detailData.gridData.unshift({
item: '设备ID',
value: data.device_id
})
dialogTableVisible.value = true
}
//
const handleAdd = async () => {
showEdit.value = true

View File

@ -9,7 +9,7 @@
<el-form-item label="设备ID" prop="device_id">
<el-input class="w-[280px]" v-model="queryParams.device_id" clearable placeholder="请输入设备ID" />
</el-form-item>
<el-form-item label="创建时间" prop="create_time">
<el-form-item label="监测时间" prop="create_time">
<daterange-picker
v-model:startTime="queryParams.start_time"
v-model:endTime="queryParams.end_time"
@ -36,20 +36,16 @@
<el-table-column label="氮含量" prop="n_content" show-overflow-tooltip />
<el-table-column label="磷含量" prop="p_content" show-overflow-tooltip />
<el-table-column label="钾含量" prop="k_content" show-overflow-tooltip />
<el-table-column label="创建时间" prop="create_time">
<el-table-column label="监测时间" width="160" prop="create_time">
<template #default="{ row }">
<span>{{ row.create_time ? timeFormat(row.create_time, 'yyyy-mm-dd hh:MM:ss') : '' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<el-table-column label="操作" width="140" align="center" fixed="right">
<template #default="{ row }">
<el-button
v-perms="['device.soil_monitor/edit']"
type="primary"
link
@click="handleEdit(row)"
<el-button text @click="handleDetail(row)"
>
编辑
详情
</el-button>
<el-button
v-perms="['device.soil_monitor/delete']"
@ -69,25 +65,32 @@
</el-card>
<edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
</div>
<el-dialog v-model="dialogTableVisible" title="土壤监测数据">
<el-table :data="detailData.gridData">
<el-table-column property="item" label="监测项" width="150" />
<el-table-column property="value" label="监测数据" />
</el-table>
</el-dialog>
</template>
<script lang="ts" setup name="soilMonitorLists">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiSoilMonitorLists, apiSoilMonitorDelete } from '@/api/soil_monitor'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import type EditPopup from './edit.vue'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
//
const showEdit = ref(false)
//
const queryParams = reactive({
device_id: '',
create_time: '',
start_time: '',
end_time: ''
})
//
@ -107,6 +110,49 @@ const { pager, getLists, resetParams, resetPage } = usePaging({
params: queryParams
})
const dialogTableVisible = ref(false)
const detailData = reactive({
gridData : [{}]
})
//
const handleDetail = (data: any) => {
detailData.gridData = [{}]
detailData.gridData.unshift({
item: '钾含量',
value: data.k_content
})
detailData.gridData.unshift({
item: '磷含量',
value: data.p_content
})
detailData.gridData.unshift({
item: '氮含量',
value: data.n_content
})
detailData.gridData.unshift({
item: '土壤酸碱度',
value: data.ph
})
detailData.gridData.unshift({
item: '电导率',
value: data.conductivity
})
detailData.gridData.unshift({
item: '土壤湿度',
value: data.moisture
})
detailData.gridData.unshift({
item: '土壤温度',
value: data.temperature
})
detailData.gridData.unshift({
item: '设备ID',
value: data.device_id
})
dialogTableVisible.value = true
}
//
const handleAdd = async () => {
showEdit.value = true

View File

@ -1,36 +1,7 @@
<template>
<div class="workbench">
<div class="lg:flex">
<el-card class="!border-none mb-4 lg:mr-4 lg:w-[350px]" shadow="never">
<template #header>
<span class="card-title">版本信息</span>
</template>
<div>
<div class="flex leading-9">
<div class="w-20">当前版本</div>
<span> {{ workbenchData.version.version }}</span>
</div>
<div class="flex leading-9">
<div class="w-20">基于框架</div>
<span> {{ workbenchData.version.based }}</span>
</div>
<div class="flex leading-9">
<div class="w-20">获取渠道</div>
<div>
<a :href="workbenchData.version.channel.website" target="_blank">
<el-button type="success" size="small">官网</el-button>
</a>
<a
class="ml-3"
:href="workbenchData.version.channel.gitee"
target="_blank"
>
<el-button type="danger" size="small">Gitee</el-button>
</a>
</div>
</div>
</div>
</el-card>
<el-card class="!border-none mb-4 flex-1" shadow="never">
<template #header>
<div>
@ -41,95 +12,7 @@
</div>
</template>
<div class="flex flex-wrap">
<div class="w-1/2 md:w-1/4">
<div class="leading-10">访问量()</div>
<div class="text-6xl">{{ workbenchData.today.today_visitor }}</div>
<div class="text-tx-secondary text-xs">
总访问量{{ workbenchData.today.total_visitor }}
</div>
</div>
<div class="w-1/2 md:w-1/4">
<div class="leading-10">销售额()</div>
<div class="text-6xl">{{ workbenchData.today.today_sales }}</div>
<div class="text-tx-secondary text-xs">
总销售额{{ workbenchData.today.total_sales }}
</div>
</div>
<div class="w-1/2 md:w-1/4">
<div class="leading-10">订单量()</div>
<div class="text-6xl">{{ workbenchData.today.order_num }}</div>
<div class="text-tx-secondary text-xs">
总订单量{{ workbenchData.today.order_sum }}
</div>
</div>
<div class="w-1/2 md:w-1/4">
<div class="leading-10">新增用户</div>
<div class="text-6xl">{{ workbenchData.today.today_new_user }}</div>
<div class="text-tx-secondary text-xs">
总访用户{{ workbenchData.today.total_new_user }}
</div>
</div>
</div>
</el-card>
</div>
<div class="function mb-4">
<el-card class="flex-1 !border-none" shadow="never">
<template #header>
<span>常用功能</span>
</template>
<div class="flex flex-wrap">
<div
v-for="item in workbenchData.menu"
class="md:w-[12.5%] w-1/4 flex flex-col items-center"
:key="item"
>
<router-link :to="item.url" class="mb-3 flex flex-col items-center">
<image-contain width="40px" height="40px" :src="item?.image" />
<div class="mt-2">{{ item.name }}</div>
</router-link>
</div>
</div>
</el-card>
</div>
<div class="md:flex">
<el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never">
<template #header>
<span>访问量趋势图</span>
</template>
<div>
<v-charts
style="height: 350px"
:option="workbenchData.visitorOption"
:autoresize="true"
/>
</div>
</el-card>
<el-card class="!border-none mb-4" shadow="never">
<template #header>
<span>服务支持</span>
</template>
<div>
<div v-for="(item, index) in workbenchData.support" :key="index">
<div
class="flex items-center pb-10 pt-10"
:class="{
'border-b border-br': index == 0
}"
>
<image-contain
:width="120"
:height="120"
class="flex-none"
:src="item.image"
/>
<div class="ml-2">
<div>{{ item.title }}</div>
<div class="text-tx-regular text-xs mt-4">{{ item.desc }}</div>
</div>
</div>
</div>
</div>
</el-card>
</div>
</div>