From 50bf2b134dff8f56d72e4ffe934540d8b1b2f519 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 01 Mar 2024 09:57:28 +0800
Subject: [PATCH] fix:手持设备
---
src/components/formTypeComponets/dialog/index.vue | 91 ++++++++
src/components/formTypeComponets/radioGroupCompones/index.vue | 79 +++++++
src/views/hand/index.vue | 439 +++++++++++++++++++++++++++++++++++++++
src/router/dynamicRouter.js | 8
4 files changed, 617 insertions(+), 0 deletions(-)
diff --git a/src/components/formTypeComponets/dialog/index.vue b/src/components/formTypeComponets/dialog/index.vue
new file mode 100644
index 0000000..b298c4b
--- /dev/null
+++ b/src/components/formTypeComponets/dialog/index.vue
@@ -0,0 +1,91 @@
+<template>
+ <el-dialog
+ :title="title"
+ top="10vh"
+ center
+ :visible.sync="visible"
+ :width="width"
+ :destroy-on-close="true"
+ @close="close()"
+ >
+ <div>
+ <slot
+ class="body"
+ name="body"
+ >
+ ������������body
+ </slot>
+ </div>
+ <div
+ slot="footer"
+ class="dialog-footer"
+ >
+ <el-button
+ v-if="isShowCloseBut"
+ @click="close()"
+ >
+ ������
+ </el-button>
+ <el-button
+ v-if="isShowSumbitBut"
+ type="primary"
+ @click="close()"
+ >
+ ��� ���
+ </el-button>
+ </div>
+ </el-dialog>
+</template>
+
+<script>
+export default {
+ components: {},
+ props: {
+ width: {
+ type: String,
+ default: '30%'
+ },
+ title: {
+ type: String,
+ default: 'title'
+ },
+ isShowCloseBut: {
+ type: Boolean,
+ default: true
+ },
+ isShowSumbitBut: {
+ type: Boolean,
+ default: true
+ },
+ dialogVisible: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data () {
+ return {
+ visible: false
+ }
+ },
+ computed: {},
+ watch: {},
+ created () {
+ console.log('this.dialogVisible', this.dialogVisible)
+ this.visible = this.dialogVisible
+ },
+ mounted () {
+
+ },
+ methods: {
+ close () {
+ this.visible = false
+ this.$emit('update:dialogVisible', false)
+ },
+ handleClose () {
+
+ }
+ }
+}
+</script>
+<style scoped lang="scss">
+</style>
diff --git a/src/components/formTypeComponets/radioGroupCompones/index.vue b/src/components/formTypeComponets/radioGroupCompones/index.vue
new file mode 100644
index 0000000..3928cec
--- /dev/null
+++ b/src/components/formTypeComponets/radioGroupCompones/index.vue
@@ -0,0 +1,79 @@
+<template>
+ <el-radio-group
+ v-model="radio"
+ :size="size"
+ @input="changeRadio"
+ >
+ <el-radio-button
+ v-for="(item,index) in radioData"
+ :key="index"
+ :label="item.label"
+ />
+ </el-radio-group>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import _ from 'lodash'
+export default {
+ components: {},
+ props: {
+ type: {
+ type: String,
+ default: 'timeDate'
+ },
+ radioSelect: {
+ type: String,
+ default: ''
+ },
+ radioData: {
+ type: Array,
+ default: null
+ // { label: '������', value: 'today', type: 'day', num: '0' },
+ // { label: '������', value: 'yesterday', type: 'day', num: '1', },
+ // { label: '���3���', value: 'week', type: 'day', num: '3', },
+ // { label: '���1������', value: 'month', type: 'month', num: '1', },
+ // { label: '���3������', value: 'threeMonth', type: 'month', num: '3', },
+ },
+ size: {
+ type: String,
+ default: 'medium'
+ }
+ },
+ data () {
+ return {
+ radio: ''
+ }
+ },
+ computed: {},
+ watch: {
+ radioSelect (newVal) {
+ console.log('newval', newVal)
+ this.radio = newVal
+ }
+ },
+ created () {
+ this.radio = this.radioSelect
+ this.changeRadio(this.radio)
+ },
+ mounted () {
+
+ },
+ methods: {
+ changeRadio (e) {
+ let data = _.find(this.radioData, ['label', e])
+ if (this.type === 'timeDate') {
+ const endTime = dayjs().format('YYYY-MM-DD HH:mm')
+ const startTime = data.num === '0' ? dayjs().startOf('day').format('YYYY-MM-DD HH:mm') : dayjs().subtract(data.num, data.type).format('YYYY-MM-DD HH:mm')
+ data.startTime = startTime
+ data.endTime = endTime
+ }
+ console.log('data', data)
+ this.$emit('changeRadio', data)
+ }
+ }
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/src/router/dynamicRouter.js b/src/router/dynamicRouter.js
index 933f131..d794134 100644
--- a/src/router/dynamicRouter.js
+++ b/src/router/dynamicRouter.js
@@ -107,6 +107,12 @@
component: () => import('@/views/govReport/index'),
meta: { title: '���������������������������', icon: 'example' }
}
+const hand = {
+ path: 'report/hand',
+ name: 'hand',
+ component: () => import('@/views/hand/index'),
+ meta: { title: '������������', icon: 'example' }
+}
// ������������������������
const airQualityReportDisplay = {
path: 'report/airQualityReportDisplay',
@@ -240,6 +246,7 @@
showMpData: showMpData,
staffManagement: staffManagement,
showGovHourData: showGovHourData,
+ hand: hand,
cityAirRank: cityAirRank,
levelStatistic: levelStatistic,
onlineRate: onlineRate,
@@ -276,6 +283,7 @@
// ������������������
export function routerMenus() {
+ console.log('user.menus', JSON.parse(store.state.user.menus))
const routersMenu = JSON.parse(store.state.user.menus)
// ��������������������������������� ���������������������������
console.log('routersMenu', routersMenu)
diff --git a/src/views/hand/index.vue b/src/views/hand/index.vue
new file mode 100644
index 0000000..383e697
--- /dev/null
+++ b/src/views/hand/index.vue
@@ -0,0 +1,439 @@
+<template>
+ <div class="contenet">
+ <div class="searchBox">
+ <el-form
+ :inline="true"
+ :model="formInline"
+ class="demo-form-inline"
+ >
+ <div>
+ <el-form-item label="������������:">
+ <el-select
+ v-model="formInline.mac"
+ size="medium"
+ placeholder="������������"
+ >
+ <el-option
+ v-for="item in handList"
+ :key="item.id"
+ :label="item.mac"
+ :value="item.mac"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="������������:">
+ <el-input
+ v-model="formInline.name"
+ size="medium"
+ placeholder="������������"
+ />
+ </el-form-item>
+ <el-form-item>
+ <radioGroupComponent
+ :radio-data="radioGrouplist"
+ :radio-select="radio"
+ @changeRadio="changeRadio"
+ />
+ </el-form-item>
+ <el-form-item label="������������:">
+ <el-date-picker
+ v-model="value"
+ size="medium"
+ type="datetimerange"
+ start-placeholder="������������"
+ end-placeholder="������������"
+ :default-time="['00:00:00']"
+ @change="sendPicker"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="primary"
+ size="medium"
+ @click="onSubmit"
+ >
+ ������
+ </el-button>
+ </el-form-item>
+ </div>
+ </el-form>
+ </div>
+ <div>
+ <el-table
+ :data="tableData"
+ border
+ size="mini"
+ max-height="680"
+ style="width: 100%"
+ :header-cell-style="{
+ color: '#101111', fontSize: '16px'
+ }"
+ :cell-style="{ color: '#101111', fontSize: '16px'}"
+ >
+ <el-table-column
+ type="index"
+ label="������"
+ width="60px"
+ align="center"
+ />
+ <el-table-column
+ prop="mac"
+ align="center"
+ label="���������"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ align="center"
+ width="200px"
+ label="������������"
+ />
+ <el-table-column
+ prop="address"
+ align="center"
+ label="������������"
+ />
+ <el-table-column
+ prop="startTime"
+ align="center"
+ width="200px"
+ label="������������"
+ />
+ <el-table-column
+ prop="endTime"
+ align="center"
+ label="������������"
+ width="200px"
+ />
+ <el-table-column
+ width="60px"
+ align="center"
+ label="������"
+ >
+ <template slot-scope="scope">
+ <el-button
+ type="text"
+ size="medium"
+ @click="showDetail(scope.row)"
+ >
+ ������
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pagina">
+ <el-pagination
+ background
+ :current-page="pagination.currentPage"
+ :page-sizes="pagination.pageSizes"
+ :page-size="pagination.pageSize"
+ :total="pagination.totalCount"
+ layout="total, sizes, prev, pager, next, jumper"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </div>
+ <div>
+ <diaLog
+ v-if="isVisible"
+ :dialog-visible.sync="isVisible"
+ :title="`������������`"
+ :width="`90%`"
+ :is-show-sumbit-but="false"
+ >
+ <template #body>
+ <div>
+ <div class="devaiceDetailTitle">
+ <p>���������������{{ selectRow.name }}</p>
+ <p>���������������{{ selectRow.address }}</p>
+ <p>������������������{{ selectRow.longitude }},{{ selectRow.latitude }}</p>
+ </div>
+ <div class="typeBox">
+ <div class="tapChart">
+ <p
+ :class="{pClick: tapName === 'hour'}"
+ @click="changeTap('hour')"
+ >
+ ������
+ </p>
+ <p
+ :class="{pClick: tapName === 'minutely'}"
+ @click="changeTap('minutely')"
+ >
+ 5������
+ </p>
+ </div>
+ <div>
+ <el-button
+ size="mini"
+ type="primary"
+ @click="handleExport"
+ >
+ ������
+ </el-button>
+ </div>
+ </div>
+ <div>
+ <el-table
+ :data="rowDetailDate"
+ border
+ size="mini"
+ max-height="480"
+ style="width: 100%"
+ :header-cell-style="{
+ color: '#101111', fontSize: '16px'
+ }"
+ :cell-style="{ color: '#101111', fontSize: '16px',padding: '10px 0'}"
+ >
+ <el-table-column
+ type="index"
+ label="������"
+ width="60px"
+ align="center"
+ />
+ <el-table-column
+ prop="time"
+ align="center"
+ label="������"
+ width="180"
+ >
+ <template slot-scope="scope">
+ {{ scope.row.time | timeFormat }}
+ </template>
+ </el-table-column>
+ <el-table-column
+ v-for="(item,index) in tableColumnData"
+ :key="index"
+ :prop="item.prop"
+ align="center"
+ :label="item.label + item.unit"
+ />
+ </el-table>
+ </div>
+ </div>
+ </template>
+ </diaLog>
+ </div>
+ </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import radioGroupComponent from '@/components/formTypeComponets/radioGroupCompones/index.vue'
+import diaLog from '@/components/formTypeComponets/dialog/index.vue'
+export default {
+ components: {
+ radioGroupComponent,
+ diaLog
+ },
+ filters: {
+ timeFormat (time) {
+ return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
+ }
+ },
+ data () {
+ return {
+ formInline: {
+ mac: '',
+ name: '',
+ startTime: '',
+ endTime: ''
+ },
+ tableColumnData: [
+ { prop: 'a34004', label: 'PM2.5', unit: 'ug/m��' },
+ { prop: 'a34002', label: 'PM10', unit: 'ug/m��' },
+ { prop: 'a21004', label: '���������������', unit: 'ug/m��' },
+ { prop: 'a21026', label: '������������', unit: 'ug/m��' },
+ { prop: 'a21005', label: '������������', unit: 'mg/m��' },
+ { prop: 'a01006', label: '������', unit: 'hpa' },
+ { prop: 'a01001', label: '������', unit: '���' },
+ { prop: 'a01002', label: '������', unit: '%' },
+ { prop: 'a99054', label: 'TVOC', unit: 'ug/m��' },
+ { prop: 'a31001', label: '������', unit: 'mg/m��' },
+ { prop: 'a21028', label: '���������', unit: 'ppm' },
+ { prop: 'a21001', label: '������', unit: 'ug/m��' },
+ ],
+ handList: [],
+ radio: '������',
+ tapName: 'hour',
+ value: '',
+ radioGrouplist: [
+ { label: '������', value: 'today', type: 'day', num: '0' },
+ { label: '������', value: 'yesterday', type: 'day', num: '1', },
+ { label: '���3���', value: 'week', type: 'day', num: '3', },
+ { label: '���1������', value: 'month', type: 'month', num: '1', },
+ { label: '���3������', value: 'threeMonth', type: 'month', num: '3', },
+ ],
+ tableData: [],
+ rowDetailDate: [],
+ pagination: {
+ currentPage: 1,
+ // ������������������������������������������(���������������������������)
+ totalCount: 0,
+ // ������������������������������
+ pageSizes: [10, 30, 60, 100],
+ // ������������������������������������������
+ pageSize: 10
+ },
+ isVisible: false,
+ selectRow: {}
+ }
+ },
+ created () {
+ this.$request({
+ url: '/hand/check',
+ method: 'get'
+ }).then(res => {
+ if (res.code === 0) {
+ this.handList = res.data
+ } else {
+ this.$message.error(res.message)
+ }
+ })
+ },
+ methods: {
+ handleExport () {
+ this.$request({
+ url: 'hand/unitExel',
+ method: 'get',
+ responseType: 'blob',
+ params: {
+ mac: this.selectRow.mac,
+ startTime: this.selectRow.startTime,
+ endTime: this.selectRow.endTime,
+ type: this.tapName
+ }
+ }).then(res => {
+ this.getOutExcel('������������������.xlsx', res)
+ })
+ },
+ getOutExcel (fileName, res) {
+ const blob = new Blob([res], { type: 'application/x-xls' })
+ if (window.navigator.msSaveOrOpenBlob) {
+ // ������ IE & EDGE
+ navigator.msSaveBlob(blob, fileName)
+ } else {
+ var link = document.createElement('a')
+ // ������������������������URL������
+ const url = window.URL || window.webkitURL || window.moxURL
+ // ������������������
+ link.href = url.createObjectURL(blob)
+ // ������������������
+ link.download = fileName
+ // ������������������
+ link.click()
+ // ������������������������
+ url.revokeObjectURL(link.href)
+ }
+ },
+ changeRadio (e) {
+ this.formInline.startTime = e.startTime
+ this.formInline.endTime = e.endTime
+ this.radio = e.label
+ this.value = ''
+ },
+ sendPicker (e) {
+ this.radio = ''
+ console.log(' this.radio', this.radio)
+ this.formInline.startTime = dayjs(e[0]).format('YYYY-MM-DD HH:mm:ss')
+ this.formInline.endTime = dayjs(e[1]).format('YYYY-MM-DD HH:mm:ss')
+ },
+ showDetail (row) {
+ this.selectRow = row
+ this.tapName = 'hour'
+ console.log('row', row)
+ this.changeTimeType()
+ },
+ changeTimeType () {
+ this.$request({
+ url: '/hand/details',
+ method: 'get',
+ params: {
+ mac: this.selectRow.mac,
+ startTime: this.selectRow.startTime,
+ endTime: this.selectRow.endTime,
+ type: this.tapName
+ }
+ }).then(res => {
+ if (res.code === 0) {
+ console.log('res', res)
+ this.isVisible = true
+ this.rowDetailDate = res.data
+ } else {
+ this.$message.error(res.message)
+ }
+ })
+ },
+ onSubmit () {
+ this.$request({
+ url: '/hand/page',
+ method: 'post',
+ data: {
+ ...this.formInline,
+ page: this.pagination
+ }
+ }).then(res => {
+ if (res.code === 0) {
+ this.tableData = res.data.list
+ this.pagination.totalCount = res.data.page.totalNum
+ } else {
+ this.$message.error(res.message)
+ }
+ })
+ },
+ changeTap (val) {
+ this.tapName = val
+ this.changeTimeType()
+ },
+ // ������
+ handleSizeChange (val) {
+ this.pagination.pageSize = val
+ this.pagination.currentPage = 1
+ this.onSubmit()
+ },
+ handleCurrentChange (val) {
+ this.pagination.currentPage = val
+ this.onSubmit()
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.contenet{
+ padding: 10px;
+}
+.searchBox{
+ /deep/.el-form-item{
+ margin-bottom: 10px;
+ }
+}
+.pagina{
+ margin-top: 10px;
+}
+.devaiceDetailTitle{
+ p{
+ display: inline-block;
+ margin-right: 10px;
+ font-size: 18px;
+ }
+}
+.tapChart{
+ p{
+ display: inline-block;
+ margin-right: 10px;
+ cursor: pointer;
+ padding-bottom: 5px;
+ }
+ .pClick{
+ color: #409EFF;
+ border-bottom: #409EFF 3px solid;
+ }
+}
+.typeBox{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+</style>
--
Gitblit v1.8.0