| | |
| | | { |
| | | "name": "vue-next-admin", |
| | | "version": "2.1.1", |
| | | "description": "vue3 vite next admin template", |
| | | "author": "lyt_20201208", |
| | | "license": "MIT", |
| | | "scripts": { |
| | | "dev": "vite --force", |
| | | "build": "vite build", |
| | | "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/" |
| | | }, |
| | | "dependencies": { |
| | | "@amap/amap-jsapi-loader": "^1.0.1", |
| | | "@element-plus/icons-vue": "^2.0.6", |
| | | "@kjgl77/datav-vue3": "^1.6.1", |
| | | "@wangeditor/editor": "^5.1.14", |
| | | "axios": "^0.27.2", |
| | | "countup.js": "^2.2.0", |
| | | "cropperjs": "^1.5.12", |
| | | "echarts": "^5.3.3", |
| | | "echarts-gl": "^2.0.9", |
| | | "echarts-wordcloud": "^2.0.0", |
| | | "element-plus": "^2.2.9", |
| | | "js-base64": "^3.7.2", |
| | | "js-cookie": "^3.0.1", |
| | | "json-bigint": "^1.0.0", |
| | | "jsplumb": "^2.15.6", |
| | | "mitt": "^3.0.0", |
| | | "nprogress": "^0.2.0", |
| | | "pinia": "^2.0.14", |
| | | "pinia-plugin-persistedstate": "^2.1.1", |
| | | "print-js": "^1.6.0", |
| | | "qrcodejs2-fixes": "^0.0.2", |
| | | "screenfull": "^6.0.1", |
| | | "sortablejs": "^1.15.0", |
| | | "splitpanes": "^3.1.1", |
| | | "vue": "^3.2.36", |
| | | "vue-clipboard3": "^2.0.0", |
| | | "vue-grid-layout": "^3.0.0-beta1", |
| | | "vue-i18n": "^9.1.10", |
| | | "vue-router": "^4.0.15", |
| | | "wangeditor": "^4.7.15", |
| | | "xlsx": "^0.18.5" |
| | | }, |
| | | "devDependencies": { |
| | | "@types/json-bigint": "^1.0.1", |
| | | "@types/node": "^17.0.39", |
| | | "@types/nprogress": "^0.2.0", |
| | | "@types/sortablejs": "^1.13.0", |
| | | "@typescript-eslint/eslint-plugin": "^5.27.0", |
| | | "@typescript-eslint/parser": "^5.27.0", |
| | | "@vitejs/plugin-vue": "^2.3.3", |
| | | "@vue/compiler-sfc": "^3.2.36", |
| | | "amfe-flexible": "^2.2.1", |
| | | "dotenv": "^16.0.1", |
| | | "eslint": "^8.17.0", |
| | | "eslint-plugin-vue": "^9.1.0", |
| | | "postcss-pxtorem": "^6.0.0", |
| | | "prettier": "^2.6.2", |
| | | "sass": "^1.52.2", |
| | | "sass-loader": "^13.0.0", |
| | | "typescript": "^4.7.3", |
| | | "vite": "^2.9.9", |
| | | "vue-eslint-parser": "^9.0.2" |
| | | }, |
| | | "browserslist": [ |
| | | "> 1%", |
| | | "last 2 versions", |
| | | "not dead" |
| | | ], |
| | | "bugs": { |
| | | "url": "https://gitee.com/lyt-top/vue-next-admin/issues" |
| | | }, |
| | | "engines": { |
| | | "node": ">=12.0.0", |
| | | "npm": ">= 6.0.0" |
| | | }, |
| | | "keywords": [ |
| | | "vue", |
| | | "vue3", |
| | | "vuejs/vue-next", |
| | | "element-ui", |
| | | "element-plus", |
| | | "vue-next-admin", |
| | | "next-admin" |
| | | ], |
| | | "repository": { |
| | | "type": "git", |
| | | "url": "https://gitee.com/lyt-top/vue-next-admin.git" |
| | | } |
| | | "name": "vue-next-admin", |
| | | "version": "2.1.1", |
| | | "description": "vue3 vite next admin template", |
| | | "author": "lyt_20201208", |
| | | "license": "MIT", |
| | | "scripts": { |
| | | "dev": "vite --force", |
| | | "build": "vite build", |
| | | "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/" |
| | | }, |
| | | "dependencies": { |
| | | "@amap/amap-jsapi-loader": "^1.0.1", |
| | | "@element-plus/icons-vue": "^2.0.6", |
| | | "@kjgl77/datav-vue3": "^1.6.1", |
| | | "@wangeditor/editor": "^5.1.14", |
| | | "axios": "^0.27.2", |
| | | "countup.js": "^2.2.0", |
| | | "cropperjs": "^1.5.12", |
| | | "echarts": "^5.3.3", |
| | | "echarts-gl": "^2.0.9", |
| | | "echarts-wordcloud": "^2.0.0", |
| | | "element-plus": "^2.2.9", |
| | | "js-base64": "^3.7.2", |
| | | "js-cookie": "^3.0.1", |
| | | "json-bigint": "^1.0.0", |
| | | "jsplumb": "^2.15.6", |
| | | "mitt": "^3.0.0", |
| | | "moment": "^2.29.4", |
| | | "nprogress": "^0.2.0", |
| | | "pinia": "^2.0.14", |
| | | "pinia-plugin-persistedstate": "^2.1.1", |
| | | "print-js": "^1.6.0", |
| | | "qrcodejs2-fixes": "^0.0.2", |
| | | "screenfull": "^6.0.1", |
| | | "sortablejs": "^1.15.0", |
| | | "splitpanes": "^3.1.1", |
| | | "vue": "^3.2.36", |
| | | "vue-clipboard3": "^2.0.0", |
| | | "vue-grid-layout": "^3.0.0-beta1", |
| | | "vue-i18n": "^9.1.10", |
| | | "vue-router": "^4.0.15", |
| | | "wangeditor": "^4.7.15", |
| | | "xlsx": "^0.18.5" |
| | | }, |
| | | "devDependencies": { |
| | | "@types/json-bigint": "^1.0.1", |
| | | "@types/node": "^17.0.39", |
| | | "@types/nprogress": "^0.2.0", |
| | | "@types/sortablejs": "^1.13.0", |
| | | "@typescript-eslint/eslint-plugin": "^5.27.0", |
| | | "@typescript-eslint/parser": "^5.27.0", |
| | | "@vitejs/plugin-vue": "^2.3.3", |
| | | "@vue/compiler-sfc": "^3.2.36", |
| | | "amfe-flexible": "^2.2.1", |
| | | "dotenv": "^16.0.1", |
| | | "eslint": "^8.17.0", |
| | | "eslint-plugin-vue": "^9.1.0", |
| | | "postcss-pxtorem": "^6.0.0", |
| | | "prettier": "^2.6.2", |
| | | "sass": "^1.52.2", |
| | | "sass-loader": "^13.0.0", |
| | | "typescript": "^4.7.3", |
| | | "vite": "^2.9.9", |
| | | "vue-eslint-parser": "^9.0.2" |
| | | }, |
| | | "browserslist": [ |
| | | "> 1%", |
| | | "last 2 versions", |
| | | "not dead" |
| | | ], |
| | | "bugs": { |
| | | "url": "https://gitee.com/lyt-top/vue-next-admin/issues" |
| | | }, |
| | | "engines": { |
| | | "node": ">=12.0.0", |
| | | "npm": ">= 6.0.0" |
| | | }, |
| | | "keywords": [ |
| | | "vue", |
| | | "vue3", |
| | | "vuejs/vue-next", |
| | | "element-ui", |
| | | "element-plus", |
| | | "vue-next-admin", |
| | | "next-admin" |
| | | ], |
| | | "repository": { |
| | | "type": "git", |
| | | "url": "https://gitee.com/lyt-top/vue-next-admin.git" |
| | | } |
| | | } |
| | |
| | | pageIndex: number; |
| | | pageSize: number; |
| | | searchParams:{ |
| | | startTime: string; |
| | | endTime: string; |
| | | time: Array<any>; |
| | | gas: string; |
| | | } |
| | |
| | | v-model="state.tableData.listQuery.searchParams.time" |
| | | type="datetimerange" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | range-separator="~" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | |
| | | style="max-width: 180px" |
| | | size="default" |
| | | > |
| | | <el-option v-for="item in state.tableData.areaList" :key="item.label" :label="item.value" :value="item.label"></el-option> |
| | | <el-option v-for="item in state.tableData.areaList" :key="item.id" :label="item.name" :value="item.id"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="气体:"> |
| | |
| | | style="max-width: 180px" |
| | | size="default" |
| | | > |
| | | <el-option v-for="item in state.tableData.gasList" :key="item.label" :label="item.value" :value="item.label"></el-option> |
| | | <el-option v-for="item in state.tableData.gasList" :key="item.id" :label="item.name" :value="item.id"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-button size="default" type="primary" class="ml10" @click="search()"> |
| | |
| | | import * as echarts from "echarts"; |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import {TableFluxState} from "/@/types/monitorData"; |
| | | import moment from "moment/moment"; |
| | | import { gasManageApi } from "/@/api/basicDataManage/gasManage"; |
| | | import {areaManageApi} from "/@/api/basicDataManage/areaManage"; |
| | | |
| | | const infoRef = ref(); |
| | | const state = reactive<TableFluxState>({ |
| | | tableData: { |
| | | data: [], |
| | |
| | | area: '' |
| | | } |
| | | }, |
| | | gasList: [ |
| | | { |
| | | label: '1', |
| | | value: '甲醛' |
| | | }, |
| | | { |
| | | label: '2', |
| | | value: '甲烷' |
| | | } |
| | | ], |
| | | areaList: [ |
| | | { |
| | | label: '1', |
| | | value: '1号区域' |
| | | }, |
| | | { |
| | | label: '2', |
| | | value: '2号区域' |
| | | } |
| | | ], |
| | | gasList: [], |
| | | areaList: [], |
| | | } |
| | | }); |
| | | |
| | |
| | | onMounted( |
| | | () => { |
| | | getNowTime(); |
| | | getArea(); |
| | | getAllGas(); |
| | | initCharts(); |
| | | |
| | | } |
| | |
| | | let sTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}` |
| | | let eTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}` |
| | | sTime = `${sTime} 00:00:30` |
| | | eTime = `${eTime} 23:59:59` |
| | | eTime = `${eTime} ` + moment().format('HH:mm:ss') |
| | | state.tableData.listQuery.searchParams.time = [sTime ,eTime]; |
| | | console.log("time",state.tableData.listQuery.searchParams.time) |
| | | } |
| | | const initInfoData = () => { |
| | | const param = { |
| | | startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'), |
| | | endTime: moment(state.tableData.listQuery.searchParams.time[1]).format('YYYY-MM-DD HH:mm:ss') |
| | | } |
| | | console.log("数据列表") |
| | | }; |
| | | |
| | | const getArea = async () => { |
| | | const param = { |
| | | pageIndex: 1, |
| | | pageSize: 999, |
| | | searchParams:{ |
| | | name: '' |
| | | } |
| | | } |
| | | let res = await areaManageApi().getAreaPage(param); |
| | | if(res.data.code == 100) { |
| | | state.tableData.areaList = res.data.data; |
| | | }else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | const getAllGas = async () => { |
| | | let res = await gasManageApi().getGas({}); |
| | | if(res.data.code == 100) { |
| | | state.tableData.gasList = res.data.data; |
| | | }else{ |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | const onHandleSizeChange = (val: number) => { |
| | | state.tableData.listQuery.pageSize = val; |
| | | initInfoData(); |
| | |
| | | state.tableData.listQuery.pageIndex = val; |
| | | initInfoData(); |
| | | }; |
| | | const del = (val: any) => { |
| | | ElMessageBox.confirm( |
| | | '确定删除此条数据?', |
| | | '提示', |
| | | { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | } |
| | | ) |
| | | .then(() => { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '删除成功', |
| | | }) |
| | | }) |
| | | }; |
| | | |
| | | const search = () => { |
| | | initInfoData(); |
| | | console.log("22",state.tableData.listQuery.searchParams) |
| | | } |
| | | const reset = () => { |
| | | state.tableData.listQuery.searchParams.time = []; |
| | | state.tableData.listQuery.searchParams.area = ''; |
| | | state.tableData.listQuery.searchParams.gas = ''; |
| | | state.tableData.listQuery.pageIndex = 1; |
| | | initInfoData(); |
| | | } |
| | | |
| | | const labelOption = { |
| | |
| | | v-model="state.tableData.listQuery.searchParams.time" |
| | | type="datetimerange" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | range-separator="~" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | |
| | | style="max-width: 180px" |
| | | size="default" |
| | | > |
| | | <el-option v-for="item in state.tableData.gasList" :key="item.label" :label="item.value" :value="item.label"></el-option> |
| | | <el-option v-for="item in state.tableData.gasList" :key="item.id" :label="item.name" :value="item.id"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-button size="default" type="primary" class="ml10" @click="search()"> |
| | |
| | | import * as echarts from "echarts"; |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import {TableGasState} from "/@/types/monitorData"; |
| | | import { gasManageApi } from "/@/api/basicDataManage/gasManage"; |
| | | import moment from "moment"; |
| | | |
| | | const infoRef = ref(); |
| | | const state = reactive<TableGasState>({ |
| | | tableData: { |
| | | data: [], |
| | |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | searchParams:{ |
| | | startTime: '', |
| | | endTime: '', |
| | | time: [], |
| | | gas: '' |
| | | } |
| | | }, |
| | | gasList: [ |
| | | { |
| | | label: '1', |
| | | value: '甲醛' |
| | | }, |
| | | { |
| | | label: '2', |
| | | value: '甲烷' |
| | | } |
| | | ] |
| | | gasList: [] |
| | | } |
| | | }); |
| | | |
| | | const chooseTime = (val: any) => { |
| | | console.log("val",val) |
| | | let sTime = Date.parse(new Date(val[0].replace(/-/g, "/"))); |
| | | let eTime = Date.parse(new Date(val[1].replace(/-/g, "/"))); |
| | | let sTime = Date.parse(new Date(val[0])); |
| | | let eTime = Date.parse(new Date(val[1])); |
| | | const datadiff = eTime - sTime + 86400000; |
| | | const time = 7 * 24 * 60 * 60 * 1000; |
| | | if (sTime > eTime) { |
| | |
| | | state.tableData.listQuery.searchParams.time = []; |
| | | return false; |
| | | } else { |
| | | console.log('七天内数据') |
| | | } |
| | | } |
| | | } |
| | | const dataZoomEnd = ref(); |
| | | const xData = ref(['10:18:26', '10:18:56', '10:19:24', '10:19:54', '10:20:26', '10:20:56', '10:21:24']); |
| | | |
| | | onMounted( |
| | | () => { |
| | | getNowTime(); |
| | | getAllGas(); |
| | | dataZoomEnd.value = xData.value.length > 25 ? 30 : 100; //x轴数量大于25,滑动框显示前30%标签,否则显示100% |
| | | console.log("dataZoomEnd",dataZoomEnd.value) |
| | | initCharts(); |
| | | } |
| | | ); |
| | |
| | | let sTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}` |
| | | let eTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}` |
| | | sTime = `${sTime} 00:00:00` |
| | | eTime = `${eTime} 23:59:59` |
| | | state.tableData.listQuery.searchParams.time = [sTime ,eTime]; |
| | | console.log("time",state.tableData.listQuery.searchParams.time) |
| | | eTime = `${eTime} ` + moment().format('HH:mm:ss') |
| | | state.tableData.listQuery.searchParams.time = [sTime,eTime]; |
| | | } |
| | | const initInfoData = () => { |
| | | console.log("数据列表") |
| | | const param = { |
| | | startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'), |
| | | endTime: moment(state.tableData.listQuery.searchParams.time[1]).format('YYYY-MM-DD HH:mm:ss') |
| | | } |
| | | console.log("数据列表",param) |
| | | }; |
| | | |
| | | const getAllGas = async () => { |
| | | let res = await gasManageApi().getGas({}); |
| | | if(res.data.code == 100) { |
| | | state.tableData.gasList = res.data.data; |
| | | }else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | const onHandleSizeChange = (val: number) => { |
| | | state.tableData.listQuery.pageSize = val; |
| | | initInfoData(); |
| | |
| | | state.tableData.listQuery.pageIndex = val; |
| | | initInfoData(); |
| | | }; |
| | | const openDialog = (type: string, value: any) => { |
| | | infoRef.value.openDialog(type, value); |
| | | }; |
| | | const del = (val: any) => { |
| | | ElMessageBox.confirm( |
| | | '确定删除此条数据?', |
| | | '提示', |
| | | { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | } |
| | | ) |
| | | .then(() => { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '删除成功', |
| | | }) |
| | | }) |
| | | }; |
| | | |
| | | const search = () => { |
| | | initInfoData(); |
| | | console.log("vla",state.tableData.listQuery.searchParams) |
| | | } |
| | | const reset = () => { |
| | | state.tableData.listQuery.searchParams.time = []; |
| | | |
| | | state.tableData.listQuery.searchParams.gas = ''; |
| | | state.tableData.listQuery.pageIndex = 1; |
| | | initInfoData(); |
| | | } |
| | | |
| | | |
| | | |
| | | const initCharts = () => { |
| | | const myChart = echarts.init(document.getElementById('gasChart')); |
| | |
| | | xAxis: { |
| | | show: true, |
| | | type: 'category', |
| | | data: ['10:18:26', '10:18:28', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| | | // axisLabel: { |
| | | // interval: 0, |
| | | // rotate: 45 |
| | | // }, |
| | | data: xData.value |
| | | }, |
| | | yAxis: { |
| | | show: true, |
| | |
| | | |
| | | }, |
| | | } |
| | | ] |
| | | ], |
| | | // dataZoom: [ |
| | | // { |
| | | // type: 'slider', |
| | | // show: dataZoomEnd.value == 100 ? false : true, |
| | | // realtime: true, |
| | | // start: 0, |
| | | // end: dataZoomEnd.value |
| | | // }, |
| | | // ] |
| | | }; |
| | | // 使用刚指定的配置项和数据显示图表。 |
| | | myChart.setOption(option); |
| | |
| | | v-model="state.tableData.listQuery.searchParams.time" |
| | | type="datetimerange" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | range-separator="~" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | |
| | | import * as echarts from "echarts"; |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import {TableWeatherState} from "/@/types/monitorData"; |
| | | import moment from "moment/moment"; |
| | | |
| | | const infoRef = ref(); |
| | | const state = reactive<TableWeatherState>({ |
| | |
| | | () => { |
| | | getNowTime(); |
| | | initCharts(); |
| | | initInfoData() |
| | | } |
| | | ); |
| | | const getNowTime = () => { |
| | |
| | | let sTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}` |
| | | let eTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}` |
| | | sTime = `${sTime} 00:00:00` |
| | | eTime = `${eTime} 23:59:59` |
| | | eTime = `${eTime} ` + moment().format('HH:mm:ss') |
| | | state.tableData.listQuery.searchParams.time = [sTime ,eTime]; |
| | | console.log("time",state.tableData.listQuery.searchParams.time) |
| | | } |
| | | const initInfoData = () => { |
| | | const param = { |
| | | startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'), |
| | | endTime: moment(state.tableData.listQuery.searchParams.time[1]).format('YYYY-MM-DD HH:mm:ss') |
| | | } |
| | | console.log("数据列表") |
| | | }; |
| | | const onHandleSizeChange = (val: number) => { |
| | |
| | | state.tableData.listQuery.pageIndex = val; |
| | | initInfoData(); |
| | | }; |
| | | const openDialog = (type: string, value: any) => { |
| | | infoRef.value.openDialog(type, value); |
| | | }; |
| | | const del = (val: any) => { |
| | | ElMessageBox.confirm( |
| | | '确定删除此条数据?', |
| | | '提示', |
| | | { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | } |
| | | ) |
| | | .then(() => { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '删除成功', |
| | | }) |
| | | }) |
| | | }; |
| | | |
| | | const search = () => { |
| | | console.log("vla",state.tableData.listQuery.searchParams) |
| | | initInfoData(); |
| | | } |
| | | const reset = () => { |
| | | state.tableData.listQuery.searchParams.time = []; |
| | | |
| | | state.tableData.listQuery.searchParams.weatherType = ''; |
| | | state.tableData.listQuery.pageIndex = 1; |
| | | initInfoData(); |
| | | } |
| | | |
| | | const initCharts = () => { |