危废品箱管理

src/api/guojian/index.js

@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+//big/getScreen
+
+// 查询历史记录
+export function getGuoJianRecord(query) {
+    return request({
+        url: 'screen/guoJian/getGuoJianRecord',
+        method: 'get',
+        params: query
+    })
+}
+
+// 查询短信发送记录
+export function getSmsRecord(query) {
+    return request({
+        url: 'screen/guoJian/getSmsRecord',
+        method: 'get',
+        params: query
+    })
+}

src/views/guojian/alarm/index.vue

@@ -1,10 +1,179 @@
 <template>
-  <div class="">
+    <div class="app-container">
-    报警数据
+        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+            <el-form-item label="创建时间" style="width: 308px;">
+                <el-date-picker v-model="pickerTime" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
+                    start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+            </el-form-item>
+            <el-form-item label="报警类型" prop="alarmType">
+                <el-select v-model="queryParams.alarmType" value-key="label" style="width: 200px" filterable
+                    placeholder="选择报警类型" @keyup.enter="handleQuery">
+                    <el-option value="0" label="请选择"></el-option>
+                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+        <el-row :gutter="10" class="mb8">
+            <!-- <el-col :span="1.5">
+                <el-button type="primary" plain icon="Plus" @click="handleAdd"
+                    v-hasPermi="['big:device:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="success" plain icon="Edit" :disabled="single" v-hasPermi="['big:device:update']"
+                    @click="handleUpdate(ids[0])">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="Delete" :disabled="multiple" v-hasPermi="['big:device:del']"
+                    @click="handleDelete">删除</el-button>
+            </el-col> -->
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <!-- 
+            {
+            "id": 10051,
+            "devName": "危废品箱",
+            "divulge": "0",
+            "smoke": "1",
+            "temperature": "19.8",
+            "humidity": "46.3",
+            "methane": "0",
+            "airStatus": "0",
+            "airExhaust": "0",
+            "ts": "2023-09-28 09:02:04",
+            "alarmType": "烟雾报警"
+        }
+         -->
+        <!-- 表格数据 -->
+        <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
+            <!-- <el-table-column type="selection" width="55" align="center" /> -->
+            <el-table-column label="序号" type="index" width="80" />
+            <!-- <el-table-column label="部门id" prop="id" width="120" /> -->
+            <el-table-column label="设备名称" prop="devName" :show-overflow-tooltip="true" />
+            <el-table-column label="时间" prop="ts" width="200" align="center" :show-overflow-tooltip="true" />
+            <el-table-column label="报警类型" prop="alarmType" align="center" :show-overflow-tooltip="true" />
+            <el-table-column label="数值" align="center" :show-overflow-tooltip="true">
+                <template #default="scope">
+                    <span v-if="scope.row.alarmType == '烟雾报警'">{{ scope.row.smoke }}</span>
+                    <span v-if="scope.row.alarmType == '可燃气体'">{{ scope.row.methane }}</span>
+                    <span v-if="scope.row.alarmType == '泄露报警'">{{ scope.row.divulge }}</span>
+                </template>
+            </el-table-column>
+
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+
     </div>
 </template>
   
-<script setup lang='ts'>
+<script setup>
+import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
+import { Picture as IconPicture } from '@element-plus/icons-vue'
+import { getGuoJianRecord } from '@/api/guojian/index'
+import useUserStore from '@/store/modules/user'
+const userStore = useUserStore()
+const { proxy } = getCurrentInstance();
+const data = reactive({
+    form: {},
+    queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        startTime: '',
+        endTime: '',
+        alarmType: '0',
+        userId: userStore.userId,
+    },
+});
+const pickerTime = ref([]);
+const { queryParams, form } = toRefs(data);
+
+let typeList = [
+    {
+        value: '1',
+        label: '烟雾',
+    },
+    {
+        value: '2',
+        label: '可燃气体',
+    },
+    {
+        value: '3',
+        label: '泄露',
+    },
+]
+
+let deviceList = ref([])
+const loading = ref(false);
+const showSearch = ref(false);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+/** 查询设备列表 */
+function getList() {
+    loading.value = true;
+    if (Array.isArray(pickerTime.value) && pickerTime.value.length > 0) {
+        queryParams.value.startTime = pickerTime.value[0];
+        queryParams.value.endTime = pickerTime.value[1];
+    } else {
+        queryParams.value.startTime = '';
+        queryParams.value.endTime = '';
+    }
+    getGuoJianRecord(queryParams.value).then(res => {
+        loading.value = false;
+        deviceList.value = res.rows;
+        total.value = res.total;
+    });
+
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+    getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+    proxy.resetForm("queryRef");
+    queryParams.value.startTime = '';
+    queryParams.value.endTime = '';
+    queryParams.value.alarmType = '0';
+    pickerTime.value = null;
+    handleQuery();
+}
+
+
+
+function handleSelectionChange(selection) {
+    ids.value = selection.map(item => item.id);
+    single.value = selection.length != 1;
+    multiple.value = !selection.length;
+}
+
+
+
+onMounted(() => {
+    getList();
+})
+
 </script>
   
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-table .el-table__cell) {
+    z-index: auto;
+}
+
+.img-preview {
+    max-width: 100%;
+    max-height: 100%;
+    display: block;
+    margin: 0 auto;
+}
+</style>
+  

src/views/guojian/historyData/index.vue

@@ -1,10 +1,181 @@
 <template>
-  <div class="">
+    <div class="app-container">
-    历史记录
+        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+            <el-form-item label="创建时间" style="width: 308px;">
+                  <el-date-picker
+                     v-model="pickerTime"
+                     value-format="YYYY-MM-DD"
+                     type="daterange"
+                     range-separator="-"
+                     start-placeholder="开始日期"
+                     end-placeholder="结束日期"
+                  ></el-date-picker>
+               </el-form-item>
+            <!-- <el-form-item label="设备类型" prop="type">
+                    <el-select v-model="queryParams.type" value-key="label" style="width: 200px" filterable placeholder="选择设备类型" @keyup.enter="handleQuery">
+                        <el-option value="" label="请选择"></el-option>
+                        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.label" />
+                    </el-select>
+            </el-form-item> -->
+            <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+        <el-row :gutter="10" class="mb8">
+            <!-- <el-col :span="1.5">
+                <el-button type="primary" plain icon="Plus" @click="handleAdd"
+                    v-hasPermi="['big:device:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="success" plain icon="Edit" :disabled="single" v-hasPermi="['big:device:update']"
+                    @click="handleUpdate(ids[0])">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="Delete" :disabled="multiple" v-hasPermi="['big:device:del']"
+                    @click="handleDelete">删除</el-button>
+            </el-col> -->
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <!-- 
+            {
+            "id": 10051,
+            "devName": "危废品箱",
+            "divulge": "0",
+            "smoke": "1",
+            "temperature": "19.8",
+            "humidity": "46.3",
+            "methane": "0",
+            "airStatus": "0",
+            "airExhaust": "0",
+            "ts": "2023-09-28 09:02:04",
+            "alarmType": "烟雾报警"
+        }
+         -->
+        <!-- 表格数据 -->
+        <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
+            <!-- <el-table-column type="selection" width="55" align="center" /> -->
+            <el-table-column label="序号" type="index" width="80" />
+            <!-- <el-table-column label="部门id" prop="id" width="120" /> -->
+            <el-table-column label="设备名称" prop="devName" :show-overflow-tooltip="true" />
+            <el-table-column label="时间" prop="ts" width="200" align="center"  :show-overflow-tooltip="true" />
+            <el-table-column label="湿度" prop="humidity" align="center"  :show-overflow-tooltip="true" />
+            <el-table-column label="温度" prop="temperature" align="center" :show-overflow-tooltip="true" />
+            <el-table-column label="泄露" prop="divulge" align="center" :show-overflow-tooltip="true" />
+            <el-table-column label="烟雾" prop="smoke" align="center" :show-overflow-tooltip="true" />
+            <el-table-column label="可燃气体" prop="methane" align="center" :show-overflow-tooltip="true" />
+            <el-table-column label="空调状态" align="center" :show-overflow-tooltip="true">
+                <template #default="scope">
+                    <el-tag v-if="scope.row.airStatus == '1'" type="success">开启</el-tag>
+                    <el-tag v-else type="info">关闭</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="排风状态" align="center" :show-overflow-tooltip="true">
+                <template #default="scope">
+                    <el-tag v-if="scope.row.airExhaust == '1'" type="success">开启</el-tag>
+                    <el-tag v-else type="info">关闭</el-tag>
+                </template>
+            </el-table-column>
+            
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+
     </div>
 </template>
   
-<script setup lang='ts'>
+<script setup>
+import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
+import { Picture as IconPicture } from '@element-plus/icons-vue'
+import { getGuoJianRecord } from '@/api/guojian/index'
+import useUserStore from '@/store/modules/user'
+const userStore = useUserStore()
+const { proxy } = getCurrentInstance();
+const data = reactive({
+    form: {},
+    queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        startTime: '',
+        endTime: '',
+        userId: userStore.userId,
+    },
+});
+const pickerTime = ref([]);
+const { queryParams, form } = toRefs(data);
+
+// testScreen({}).then(res => {
+//  alert(JSON.stringify(res))
+// })
+
+let deviceList = ref([])
+const loading = ref(false);
+const showSearch = ref(false);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+/** 查询设备列表 */
+function getList() {
+    loading.value = true;
+    if (Array.isArray(pickerTime.value) && pickerTime.value.length > 0) {
+        queryParams.value.startTime = pickerTime.value[0];
+        queryParams.value.endTime = pickerTime.value[1];
+    } else {
+        queryParams.value.startTime = '';
+        queryParams.value.endTime = '';
+    }
+    getGuoJianRecord(queryParams.value).then(res => {
+        loading.value = false;
+        deviceList.value = res.rows;
+        total.value = res.total;
+    });
+
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+    getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+    proxy.resetForm("queryRef");
+    queryParams.value.startTime = '';
+    queryParams.value.endTime = '';
+    queryParams.value.alarmType = '0';
+    pickerTime.value = null;
+    handleQuery();
+}
+
+
+
+function handleSelectionChange(selection) {
+    ids.value = selection.map(item => item.id);
+    single.value = selection.length != 1;
+    multiple.value = !selection.length;
+}
+
+
+
+onMounted(() => {
+    getList();
+})
+
 </script>
   
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-table .el-table__cell) {
+    z-index: auto;
+}
+
+.img-preview {
+    max-width: 100%;
+    max-height: 100%;
+    display: block;
+    margin: 0 auto;
+}
+</style>
+  

src/views/guojian/sms/index.vue

@@ -1,10 +1,156 @@
 <template>
-  <div class="">    
+    <div class="app-container">
-    短信发送记录
+        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+            <el-form-item label="创建时间" style="width: 308px;">
+                <el-date-picker v-model="pickerTime" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
+                    start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+            </el-form-item>
+            <!-- <el-form-item label="设备类型" prop="type">
+                    <el-select v-model="queryParams.type" value-key="label" style="width: 200px" filterable placeholder="选择设备类型" @keyup.enter="handleQuery">
+                        <el-option value="" label="请选择"></el-option>
+                        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.label" />
+                    </el-select>
+            </el-form-item> -->
+            <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+        <el-row :gutter="10" class="mb8">
+            <!-- <el-col :span="1.5">
+                <el-button type="primary" plain icon="Plus" @click="handleAdd"
+                    v-hasPermi="['big:device:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="success" plain icon="Edit" :disabled="single" v-hasPermi="['big:device:update']"
+                    @click="handleUpdate(ids[0])">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="Delete" :disabled="multiple" v-hasPermi="['big:device:del']"
+                    @click="handleDelete">删除</el-button>
+            </el-col> -->
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <!-- 
+            {
+            "id": 1,
+            "data": "1",
+            "content": "报警内容",
+            "phoneNum": "18800001111",
+            "ts": "2023-09-28 16:01:21"
+            }
+         -->
+        <!-- 表格数据 -->
+        <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
+            <!-- <el-table-column type="selection" width="55" align="center" /> -->
+            <el-table-column label="序号" type="index" width="80" />
+            <!-- <el-table-column label="部门id" prop="id" width="120" /> -->
+            <el-table-column label="时间" prop="ts" width="200" align="center" :show-overflow-tooltip="true" />
+            <el-table-column label="报警类型" prop="alarmType" align="center" :show-overflow-tooltip="true" />
+            <el-table-column label="报警值" prop="data" align="center" :show-overflow-tooltip="true" />
+            <el-table-column label="报警内容" prop="content" align="center" :show-overflow-tooltip="true" />
+            <el-table-column label="手机号" prop="phoneNum" align="center" :show-overflow-tooltip="true" />
+
+
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+
     </div>
 </template>
   
-<script setup lang='ts'>
+<script setup>
+import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
+import { Picture as IconPicture } from '@element-plus/icons-vue'
+import { getSmsRecord } from '@/api/guojian/index'
+import useUserStore from '@/store/modules/user'
+const userStore = useUserStore()
+const { proxy } = getCurrentInstance();
+const data = reactive({
+    form: {},
+    queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        startTime: '',
+        endTime: '',
+        userId: userStore.userId,
+    },
+});
+const pickerTime = ref([]);
+const { queryParams, form } = toRefs(data);
+
+// testScreen({}).then(res => {
+//  alert(JSON.stringify(res))
+// })
+
+let deviceList = ref([])
+const loading = ref(false);
+const showSearch = ref(false);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+/** 查询设备列表 */
+function getList() {
+    loading.value = true;
+    if (Array.isArray(pickerTime.value) && pickerTime.value.length > 0) {
+        queryParams.value.startTime = pickerTime.value[0];
+        queryParams.value.endTime = pickerTime.value[1];
+    } else {
+        queryParams.value.startTime = '';
+        queryParams.value.endTime = '';
+    }
+    getSmsRecord(queryParams.value).then(res => {
+        loading.value = false;
+        deviceList.value = res.rows;
+        total.value = res.total;
+    });
+
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+    getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+    proxy.resetForm("queryRef");
+    queryParams.value.startTime = '';
+    queryParams.value.endTime = '';
+    queryParams.value.alarmType = '0';
+    pickerTime.value = null;
+    handleQuery();
+}
+
+
+
+function handleSelectionChange(selection) {
+    ids.value = selection.map(item => item.id);
+    single.value = selection.length != 1;
+    multiple.value = !selection.length;
+}
+
+
+
+onMounted(() => {
+    getList();
+})
+
 </script>
   
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-table .el-table__cell) {
+    z-index: auto;
+}
+
+.img-preview {
+    max-width: 100%;
+    max-height: 100%;
+    display: block;
+    margin: 0 auto;
+}
+</style>
+