init

web/src/view/qshMonitorData/qshMonitorData.vue

@@ -2,11 +2,11 @@
     <div>
         <div class="gva-search-box">
             <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
-        <el-form-item label="原始设备id">
-          <el-input v-model="searchInfo.rawDeviceId" placeholder="搜索条件" />
+                <el-form-item label="原始设备ID">
+                    <el-input v-model="searchInfo.rawDeviceId" placeholder="搜索条件"/>
                 </el-form-item>
                 <el-form-item label="数据类型">
-          <el-input v-model="searchInfo.typeName" placeholder="搜索条件" />
+                    <el-input v-model="searchInfo.typeName" placeholder="搜索条件"/>
                 </el-form-item>
                 <el-form-item>
                     <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
@@ -16,7 +16,7 @@
         </div>
         <div class="gva-table-box">
             <div class="gva-btn-list">
-            <el-button size="small" type="primary" icon="plus" @click="openDialog">新增</el-button>
+                <!--<el-button size="small" type="primary" icon="plus" @click="openDialog">新增</el-button>-->
                 <el-popover v-model:visible="deleteVisible" placement="top" width="160">
                     <p>确定要删除吗？</p>
                     <div style="text-align: right; margin-top: 8px;">
@@ -24,31 +24,38 @@
                         <el-button size="small" type="primary" @click="onDelete">确定</el-button>
                     </div>
                     <template #reference>
-                <el-button icon="delete" size="small" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible = true">删除</el-button>
+                        <el-button icon="delete" size="small" style="margin-left: 10px;"
+                                   :disabled="!multipleSelection.length" @click="deleteVisible = true">删除
+                        </el-button>
                     </template>
                 </el-popover>
             </div>
             <el-table
                     ref="multipleTable"
-        style="width: 100%"
+                    style="flex: 1;"
+                    height="100%"
                     tooltip-effect="dark"
                     :data="tableData"
                     row-key="ID"
                     @selection-change="handleSelectionChange"
             >
-        <el-table-column type="selection" width="55" />
-        <el-table-column align="left" label="日期" width="180">
+                <el-table-column type="selection" width="55"/>
+
+                <el-table-column align="left" label="原始设备ID" prop="rawDeviceId" min-width="120"/>
+                <el-table-column align="left" label="公厕ID" prop="toiletId" min-width="120"/>
+                <el-table-column align="left" label="数据类型" prop="typeName" min-width="120"/>
+                <el-table-column align="left" label="数据值单位" prop="unit" min-width="120"/>
+                <el-table-column align="left" label="数据值" prop="value" min-width="120"/>
+                <el-table-column align="left" label="创建时间" min-width="180">
                     <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
                 </el-table-column>
-        <el-table-column align="left" label="原始设备id" prop="rawDeviceId" width="120" />
-        <el-table-column align="left" label="公厕id" prop="toiletId" width="120" />
-        <el-table-column align="left" label="数据类型" prop="typeName" width="120" />
-        <el-table-column align="left" label="数据值单位" prop="unit" width="120" />
-        <el-table-column align="left" label="数据值" prop="value" width="120" />
-        <el-table-column align="left" label="按钮组">
+                <el-table-column align="left" label="操作" min-width="120" fixed="right">
                     <template #default="scope">
-            <el-button type="primary" link icon="edit" size="small" class="table-button" @click="updateQshMonitorDataFunc(scope.row)">变更</el-button>
-            <el-button type="primary" link icon="delete" size="small" @click="deleteRow(scope.row)">删除</el-button>
+                        <el-button type="primary" link icon="edit" size="small" class="table-button"
+                                   @click="updateQshMonitorDataFunc(scope.row)">变更
+                        </el-button>
+                        <el-button type="primary" link icon="delete" size="small" @click="deleteRow(scope.row)">删除
+                        </el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -64,28 +71,28 @@
                 />
             </div>
         </div>
-    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
-      <el-form :model="formData" label-position="right" label-width="80px">
-        <el-form-item label="原始设备id:">
-          <el-input v-model="formData.rawDeviceId" clearable placeholder="请输入" />
+        <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="历史数据">
+            <el-form :model="formData" label-position="right" label-width="120px">
+                <el-form-item label="原始设备ID:">
+                    <el-input v-model="formData.rawDeviceId" clearable placeholder="请输入"/>
                 </el-form-item>
-        <el-form-item label="公厕id:">
-          <el-input v-model.number="formData.toiletId" clearable placeholder="请输入" />
+                <el-form-item label="公厕ID:">
+                    <el-input v-model="formData.toiletId" clearable placeholder="请输入"/>
                 </el-form-item>
                 <el-form-item label="数据类型:">
-          <el-input v-model="formData.typeName" clearable placeholder="请输入" />
+                    <el-input v-model="formData.typeName" clearable placeholder="请输入"/>
                 </el-form-item>
                 <el-form-item label="数据值单位:">
-          <el-input v-model="formData.unit" clearable placeholder="请输入" />
+                    <el-input v-model="formData.unit" clearable placeholder="请输入"/>
                 </el-form-item>
                 <el-form-item label="数据值:">
-          <el-input v-model="formData.value" clearable placeholder="请输入" />
+                    <el-input v-model="formData.value" clearable placeholder="请输入"/>
                 </el-form-item>
             </el-form>
             <template #footer>
                 <div class="dialog-footer">
                     <el-button size="small" @click="closeDialog">取 消</el-button>
-          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+                    <!--<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>-->
                 </div>
             </template>
         </el-dialog>
@@ -93,98 +100,98 @@
 </template>
 
 <script>
-export default {
+    export default {
         name: 'QshMonitorData'
-}
+    }
 </script>
 
 <script setup>
-import {
+    import {
         createQshMonitorData,
         deleteQshMonitorData,
         deleteQshMonitorDataByIds,
         updateQshMonitorData,
         findQshMonitorData,
         getQshMonitorDataList
-} from '@/api/qshMonitorData'
+    } from '@/api/qshMonitorData'
 
-// 全量引入格式化工具 请按需保留
-import { getDictFunc, formatDate, formatBoolean, filterDict } from '@/utils/format'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { ref } from 'vue'
+    // 全量引入格式化工具 请按需保留
+    import {getDictFunc, formatDate, formatBoolean, filterDict} from '@/utils/format'
+    import {ElMessage, ElMessageBox} from 'element-plus'
+    import {ref} from 'vue'
 
-// 自动化生成的字典（可能为空）以及字段
-const formData = ref({
+    // 自动化生成的字典（可能为空）以及字段
+    const formData = ref({
         rawDeviceId: '',
-        toiletId: 0,
+        toiletId: '',
         typeName: '',
         unit: '',
         value: '',
     })
 
-// =========== 表格控制部分 ===========
-const page = ref(1)
-const total = ref(0)
-const pageSize = ref(10)
-const tableData = ref([])
-const searchInfo = ref({})
+    // =========== 表格控制部分 ===========
+    const page = ref(1)
+    const total = ref(0)
+    const pageSize = ref(10)
+    const tableData = ref([])
+    const searchInfo = ref({})
 
-// 重置
-const onReset = () => {
+    // 重置
+    const onReset = () => {
         searchInfo.value = {}
-}
+    }
 
-// 搜索
-const onSubmit = () => {
+    // 搜索
+    const onSubmit = () => {
         page.value = 1
         pageSize.value = 10
         getTableData()
-}
+    }
 
-// 分页
-const handleSizeChange = (val) => {
+    // 分页
+    const handleSizeChange = (val) => {
         pageSize.value = val
         getTableData()
-}
+    }
 
-// 修改页面容量
-const handleCurrentChange = (val) => {
+    // 修改页面容量
+    const handleCurrentChange = (val) => {
         page.value = val
         getTableData()
-}
+    }
 
-// 查询
-const getTableData = async() => {
-  const table = await getQshMonitorDataList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
+    // 查询
+    const getTableData = async () => {
+        const table = await getQshMonitorDataList({page: page.value, pageSize: pageSize.value, ...searchInfo.value})
         if (table.code === 0) {
             tableData.value = table.data.list
             total.value = table.data.total
             page.value = table.data.page
             pageSize.value = table.data.pageSize
         }
-}
+    }
 
-getTableData()
+    getTableData()
 
-// ============== 表格控制部分结束 ===============
+    // ============== 表格控制部分结束 ===============
 
-// 获取需要的字典 可能为空 按需保留
-const setOptions = async () =>{
-}
+    // 获取需要的字典 可能为空 按需保留
+    const setOptions = async () => {
+    }
 
-// 获取需要的字典 可能为空 按需保留
-setOptions()
+    // 获取需要的字典 可能为空 按需保留
+    setOptions()
 
 
-// 多选数据
-const multipleSelection = ref([])
-// 多选
-const handleSelectionChange = (val) => {
+    // 多选数据
+    const multipleSelection = ref([])
+    // 多选
+    const handleSelectionChange = (val) => {
         multipleSelection.value = val
-}
+    }
 
-// 删除行
-const deleteRow = (row) => {
+    // 删除行
+    const deleteRow = (row) => {
         ElMessageBox.confirm('确定要删除吗?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
@@ -195,11 +202,11 @@ const deleteRow = (row) => {
     }
 
 
-// 批量删除控制标记
-const deleteVisible = ref(false)
+    // 批量删除控制标记
+    const deleteVisible = ref(false)
 
-// 多选删除
-const onDelete = async() => {
+    // 多选删除
+    const onDelete = async () => {
         const ids = []
         if (multipleSelection.value.length === 0) {
             ElMessage({
@@ -212,7 +219,7 @@ const onDelete = async() => {
         multipleSelection.value.map(item => {
             ids.push(item.ID)
         })
-      const res = await deleteQshMonitorDataByIds({ ids })
+        const res = await deleteQshMonitorDataByIds({ids})
         if (res.code === 0) {
             ElMessage({
                 type: 'success',
@@ -226,23 +233,23 @@ const onDelete = async() => {
         }
     }
 
-// 行为控制标记（弹窗内部需要增还是改）
-const type = ref('')
+    // 行为控制标记（弹窗内部需要增还是改）
+    const type = ref('')
 
-// 更新行
-const updateQshMonitorDataFunc = async(row) => {
-    const res = await findQshMonitorData({ ID: row.ID })
+    // 更新行
+    const updateQshMonitorDataFunc = async (row) => {
+        const res = await findQshMonitorData({ID: row.ID})
         type.value = 'update'
         if (res.code === 0) {
             formData.value = res.data.reqshMonitorData
             dialogFormVisible.value = true
         }
-}
+    }
 
 
-// 删除行
-const deleteQshMonitorDataFunc = async (row) => {
-    const res = await deleteQshMonitorData({ ID: row.ID })
+    // 删除行
+    const deleteQshMonitorDataFunc = async (row) => {
+        const res = await deleteQshMonitorData({ID: row.ID})
         if (res.code === 0) {
             ElMessage({
                 type: 'success',
@@ -253,30 +260,30 @@ const deleteQshMonitorDataFunc = async (row) => {
             }
             getTableData()
         }
-}
+    }
 
-// 弹窗控制标记
-const dialogFormVisible = ref(false)
+    // 弹窗控制标记
+    const dialogFormVisible = ref(false)
 
-// 打开弹窗
-const openDialog = () => {
+    // 打开弹窗
+    const openDialog = () => {
         type.value = 'create'
         dialogFormVisible.value = true
-}
+    }
 
-// 关闭弹窗
-const closeDialog = () => {
+    // 关闭弹窗
+    const closeDialog = () => {
         dialogFormVisible.value = false
         formData.value = {
             rawDeviceId: '',
-        toiletId: 0,
+            toiletId: '',
             typeName: '',
             unit: '',
             value: '',
         }
-}
-// 弹窗确定
-const enterDialog = async () => {
+    }
+    // 弹窗确定
+    const enterDialog = async () => {
         let res
         switch (type.value) {
             case 'create':
@@ -297,7 +304,7 @@ const enterDialog = async () => {
             closeDialog()
             getTableData()
         }
-}
+    }
 </script>
 
 <style>