From 56d13900e2d74eeb9e22a9d86dc929640a676f6f Mon Sep 17 00:00:00 2001 From: web <candymxq888@outlook.com> Date: 星期一, 17 三月 2025 17:21:43 +0800 Subject: [PATCH] fix:修改框架,初始化项目模板 --- src/views/facilityMaintain/facilityMaintainRecord/index.vue | 2 src/views/financial/billRecord/index.vue | 2 src/views/configuration/commonParameters/index.vue | 2 src/views/financial/userBankAccount/index.vue | 2 src/views/facility/facilityParameter/index.vue | 2 src/views/facility/facilityType/index.vue | 2 src/views/financial/tradeRecord/index.vue | 2 src/views/facility/facilityList/index.vue | 2 src/views/configuration/companySetting/index.vue | 2 src/views/workOrderManage/waterMeterCloseAccount/index.vue | 2 src/views/financial/invoice/index.vue | 2 vite.config.js | 8 src/api/system/menu.js | 4 src/views/meterReading/meterReadingRecord/index.vue | 2 src/views/workOrderManage/meterConstruction/index.vue | 2 src/api/login.js | 50 src/screen/flow.vue | 75 ++ src/store/modules/user.js | 6 src/views/workOrderManage/waterMeterAlteration/index.vue | 2 src/views/error/404.vue | 2 src/settings.js | 2 src/views/waterMeter/useWaterMeter/index.vue | 2 src/router/index.js | 112 +-- src/views/alarm/alarmScheme/index.vue | 6 src/views/financial/waterMeterTask/index.vue | 2 src/views/screen/temperature/home/index.vue | 102 ++ .env.development | 4 src/screen/temp.vue | 75 ++ src/main.js | 30 src/views/screen/flow/home/index.vue | 145 ++++ src/views/configuration/invoiceTitle/index.vue | 2 src/views/alarm/alarmDefinition/index.vue | 2 src/views/facility/area/index.vue | 4 src/views/system/dict/index.vue | 2 src/views/workOrderManage/waterMeterMaintainRecords/index.vue | 2 src/views/system/role/index.vue | 4 src/views/facilityExamine/facilityExaminePlan/index.vue | 2 src/views/configuration/userClassify/index.vue | 2 src/views/facility/handleRecord/index.vue | 2 src/views/waterMeter/meterOperation/index.vue | 2 src/views/configuration/waterPrice/index.vue | 2 src/views/financial/payable/index.vue | 2 src/views/system/menu/index.vue | 6 src/views/financial/recharge/index.vue | 2 src/views/facility/collector/index.vue | 2 src/assets/images/point.png | 0 src/views/alarm/alarmHistory/index.vue | 2 src/views/configuration/salePlace/index.vue | 2 src/views/facility/supplier/index.vue | 2 src/views/point/index.vue | 2 src/views/meterReading/meterReadingMonthRecord/index.vue | 2 src/views/configuration/waterOtherFee/index.vue | 2 src/views/customer/archives/index.vue | 2 src/views/workOrderManage/waterMeterChange/index.vue | 2 src/views/system/permission/index.vue | 2 src/views/waterMeter/verification/index.vue | 2 src/views/financial/payRecord/index.vue | 2 src/views/waterMeter/waterModel/index.vue | 2 src/assets/images/map-bg.png | 0 src/views/workOrderManage/waterMeterStopAccount/index.vue | 2 /dev/null | 569 ---------------- src/assets/images/messageInfo-box.png | 0 src/views/system/user/index.vue | 4 src/views/configuration/defaultAmountSetting/index.vue | 2 src/views/workOrderManage/workOrderList/index.vue | 2 src/views/login.vue | 528 ++++++++------ src/views/workOrderManage/waterMeterRepair/index.vue | 2 src/screen/index.vue | 225 ----- src/views/facility/valveDevice/index.vue | 6 src/views/waterMeter/supplier/index.vue | 2 src/views/facilityExamine/facilityExamineRecord/index.vue | 2 src/views/financial/userCapitalChange/index.vue | 2 72 files changed, 859 insertions(+), 1,202 deletions(-) diff --git a/.env.development b/.env.development index f3fe854..c4c671d 100644 --- a/.env.development +++ b/.env.development @@ -7,6 +7,6 @@ # 金川接口 # VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8030' - VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8036' + # VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8036' #后端本地 - #VITE_APP_PUBLIC_REQUEST_API = 'http://192.168.0.105:8029' + VITE_APP_PUBLIC_REQUEST_API = 'http://192.168.0.200:8036' diff --git a/src/api/login.js b/src/api/login.js index e444d4a..a0cafe1 100644 --- a/src/api/login.js +++ b/src/api/login.js @@ -1,39 +1,27 @@ -/* - * @Author: hqs elkers@163.com - * @Date: 2024-05-06 09:59:48 - * @LastEditors: Liuyi candymxq888@outlook.com - * @LastEditTime: 2024-08-14 09:16:12 - * @FilePath: \RuoYi-Vue3\src\api\login.js - * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE - */ import {publicRequest} from '@/utils/request' // 登录方法 export function login(data) { - return publicRequest( - { + return publicRequest({ url: '/admin/user/login', - headers: { - isToken: false, - }, - method: 'post', - data: data - }) + headers: { isToken: false }, + method: 'post', + data: data + }) } -export function userDetail() { - return { - get: (id) => { - return publicRequest({ - url: `/admin/user/detail?userId=${id}`, + +// 验证码 +export function register(uuid) { + return publicRequest({ + url: `/admin/user/generate?uuid=${uuid}`, method: 'get', - }); - }, - setPsw: (data) => { - return publicRequest({ - url: '/admin/user/changePassword', - method: 'post', - data - }); - }, - } + }) +} + +// 获取本地ip +export function getIp() { + return publicRequest({ + url: 'admin/user/getIpAddress', + method: 'get', + }); } diff --git a/src/api/system/menu.js b/src/api/system/menu.js index cf39be1..f66b296 100644 --- a/src/api/system/menu.js +++ b/src/api/system/menu.js @@ -50,9 +50,9 @@ }) }, //删除菜单 - remove:(id) =>{ + remove:(menuId) =>{ return publicRequest({ - url: `/admin/menu/remove?menuId=${id}`, + url: `/admin/menu/remove/${menuId}`, method: 'post', }) }, diff --git a/src/assets/images/bg.png b/src/assets/images/bg.png deleted file mode 100644 index 1601566..0000000 --- a/src/assets/images/bg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/dataAnalysis/icon1_1.png b/src/assets/images/dataAnalysis/icon1_1.png deleted file mode 100644 index 692816c..0000000 --- a/src/assets/images/dataAnalysis/icon1_1.png +++ /dev/null Binary files differ diff --git a/src/assets/images/dataAnalysis/icon1_2.png b/src/assets/images/dataAnalysis/icon1_2.png deleted file mode 100644 index ba1834b..0000000 --- a/src/assets/images/dataAnalysis/icon1_2.png +++ /dev/null Binary files differ diff --git a/src/assets/images/dataAnalysis/icon1_3.png b/src/assets/images/dataAnalysis/icon1_3.png deleted file mode 100644 index 80300eb..0000000 --- a/src/assets/images/dataAnalysis/icon1_3.png +++ /dev/null Binary files differ diff --git a/src/assets/images/dataAnalysis/icon1_4.png b/src/assets/images/dataAnalysis/icon1_4.png deleted file mode 100644 index 3910635..0000000 --- a/src/assets/images/dataAnalysis/icon1_4.png +++ /dev/null Binary files differ diff --git a/src/assets/images/dataAnalysis/icon1_5.png b/src/assets/images/dataAnalysis/icon1_5.png deleted file mode 100644 index ed22f79..0000000 --- a/src/assets/images/dataAnalysis/icon1_5.png +++ /dev/null Binary files differ diff --git a/src/assets/images/dataAnalysis/icon1_6.png b/src/assets/images/dataAnalysis/icon1_6.png deleted file mode 100644 index f487cda..0000000 --- a/src/assets/images/dataAnalysis/icon1_6.png +++ /dev/null Binary files differ diff --git a/src/assets/images/home/map.png b/src/assets/images/home/map.png deleted file mode 100644 index c1c5a9d..0000000 --- a/src/assets/images/home/map.png +++ /dev/null Binary files differ diff --git a/src/assets/images/login/login_bcg.png b/src/assets/images/login/login_bcg.png deleted file mode 100644 index 2eeb2ff..0000000 --- a/src/assets/images/login/login_bcg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/login/login_bcg1.png b/src/assets/images/login/login_bcg1.png deleted file mode 100644 index db77bff..0000000 --- a/src/assets/images/login/login_bcg1.png +++ /dev/null Binary files differ diff --git a/src/assets/images/login/login_icon.png b/src/assets/images/login/login_icon.png deleted file mode 100644 index 6f4e94d..0000000 --- a/src/assets/images/login/login_icon.png +++ /dev/null Binary files differ diff --git a/src/assets/images/map-bg.png b/src/assets/images/map-bg.png new file mode 100644 index 0000000..474c290 --- /dev/null +++ b/src/assets/images/map-bg.png Binary files differ diff --git a/src/assets/images/messageInfo-box.png b/src/assets/images/messageInfo-box.png new file mode 100644 index 0000000..b371547 --- /dev/null +++ b/src/assets/images/messageInfo-box.png Binary files differ diff --git a/src/assets/images/nodata.png b/src/assets/images/nodata.png deleted file mode 100644 index 63513a5..0000000 --- a/src/assets/images/nodata.png +++ /dev/null Binary files differ diff --git a/src/assets/images/point.png b/src/assets/images/point.png new file mode 100644 index 0000000..6258ce3 --- /dev/null +++ b/src/assets/images/point.png Binary files differ diff --git a/src/assets/images/report/arrow_green.png b/src/assets/images/report/arrow_green.png deleted file mode 100644 index 38a3370..0000000 --- a/src/assets/images/report/arrow_green.png +++ /dev/null Binary files differ diff --git a/src/assets/images/report/arrow_red.png b/src/assets/images/report/arrow_red.png deleted file mode 100644 index 20b8532..0000000 --- a/src/assets/images/report/arrow_red.png +++ /dev/null Binary files differ diff --git a/src/assets/images/report/img1.png b/src/assets/images/report/img1.png deleted file mode 100644 index 93ab348..0000000 --- a/src/assets/images/report/img1.png +++ /dev/null Binary files differ diff --git a/src/assets/images/report/img2.png b/src/assets/images/report/img2.png deleted file mode 100644 index c31790f..0000000 --- a/src/assets/images/report/img2.png +++ /dev/null Binary files differ diff --git a/src/assets/images/report/img3.png b/src/assets/images/report/img3.png deleted file mode 100644 index b6757b6..0000000 --- a/src/assets/images/report/img3.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/alarm/analysis.png b/src/assets/images/screen/alarm/analysis.png deleted file mode 100644 index 5819760..0000000 --- a/src/assets/images/screen/alarm/analysis.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/alarm/center.png b/src/assets/images/screen/alarm/center.png deleted file mode 100644 index 3106068..0000000 --- a/src/assets/images/screen/alarm/center.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/alarm/down-line.png b/src/assets/images/screen/alarm/down-line.png deleted file mode 100644 index 17d9c17..0000000 --- a/src/assets/images/screen/alarm/down-line.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/alarm/handle.png b/src/assets/images/screen/alarm/handle.png deleted file mode 100644 index a0df910..0000000 --- a/src/assets/images/screen/alarm/handle.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/alarm/right-line.png b/src/assets/images/screen/alarm/right-line.png deleted file mode 100644 index 01ea5c9..0000000 --- a/src/assets/images/screen/alarm/right-line.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/alarm/table-border.png b/src/assets/images/screen/alarm/table-border.png deleted file mode 100644 index b45a018..0000000 --- a/src/assets/images/screen/alarm/table-border.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/alarm/title-icon.png b/src/assets/images/screen/alarm/title-icon.png deleted file mode 100644 index 49a935f..0000000 --- a/src/assets/images/screen/alarm/title-icon.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/alarm/up-line.png b/src/assets/images/screen/alarm/up-line.png deleted file mode 100644 index 3bc8118..0000000 --- a/src/assets/images/screen/alarm/up-line.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/bcg.png b/src/assets/images/screen/bcg.png deleted file mode 100644 index 1d357bc..0000000 --- a/src/assets/images/screen/bcg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/btnbg-active.png b/src/assets/images/screen/btnbg-active.png deleted file mode 100644 index 4370ef6..0000000 --- a/src/assets/images/screen/btnbg-active.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/btnbg-center.png b/src/assets/images/screen/btnbg-center.png deleted file mode 100644 index e3a2fb2..0000000 --- a/src/assets/images/screen/btnbg-center.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/btnbg.png b/src/assets/images/screen/btnbg.png deleted file mode 100644 index 0ed328f..0000000 --- a/src/assets/images/screen/btnbg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/dma/alert.png b/src/assets/images/screen/dma/alert.png deleted file mode 100644 index 6f2d26f..0000000 --- a/src/assets/images/screen/dma/alert.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/dma/box.png b/src/assets/images/screen/dma/box.png deleted file mode 100644 index de07ceb..0000000 --- a/src/assets/images/screen/dma/box.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/dma/circle.png b/src/assets/images/screen/dma/circle.png deleted file mode 100644 index 36324b4..0000000 --- a/src/assets/images/screen/dma/circle.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/dma/icon1.png b/src/assets/images/screen/dma/icon1.png deleted file mode 100644 index a054813..0000000 --- a/src/assets/images/screen/dma/icon1.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/dma/icon2.png b/src/assets/images/screen/dma/icon2.png deleted file mode 100644 index 6f0def7..0000000 --- a/src/assets/images/screen/dma/icon2.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/dma/map.png b/src/assets/images/screen/dma/map.png deleted file mode 100644 index d61f2d8..0000000 --- a/src/assets/images/screen/dma/map.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/dma/mini-map.png b/src/assets/images/screen/dma/mini-map.png deleted file mode 100644 index cf25074..0000000 --- a/src/assets/images/screen/dma/mini-map.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/dma/table-box.png b/src/assets/images/screen/dma/table-box.png deleted file mode 100644 index ccc1303..0000000 --- a/src/assets/images/screen/dma/table-box.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/facility/detail.png b/src/assets/images/screen/facility/detail.png deleted file mode 100644 index 787fa1a..0000000 --- a/src/assets/images/screen/facility/detail.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/facility/left-box.png b/src/assets/images/screen/facility/left-box.png deleted file mode 100644 index bb6c42f..0000000 --- a/src/assets/images/screen/facility/left-box.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/facility/left-title.png b/src/assets/images/screen/facility/left-title.png deleted file mode 100644 index 2082107..0000000 --- a/src/assets/images/screen/facility/left-title.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/facility/no-img.png b/src/assets/images/screen/facility/no-img.png deleted file mode 100644 index 5e41025..0000000 --- a/src/assets/images/screen/facility/no-img.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/facility/right-box.png b/src/assets/images/screen/facility/right-box.png deleted file mode 100644 index 1fca44f..0000000 --- a/src/assets/images/screen/facility/right-box.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/facility/search-input.png b/src/assets/images/screen/facility/search-input.png deleted file mode 100644 index 2cefdf7..0000000 --- a/src/assets/images/screen/facility/search-input.png +++ /dev/null Binary files differ diff --git "a/src/assets/images/screen/facility/\345\267\241\346\243\200 .png" "b/src/assets/images/screen/facility/\345\267\241\346\243\200 .png" deleted file mode 100644 index cbd1976..0000000 --- "a/src/assets/images/screen/facility/\345\267\241\346\243\200 .png" +++ /dev/null Binary files differ diff --git "a/src/assets/images/screen/facility/\346\220\234\347\264\242\346\214\211\351\222\256.png" "b/src/assets/images/screen/facility/\346\220\234\347\264\242\346\214\211\351\222\256.png" deleted file mode 100644 index 2ab42e7..0000000 --- "a/src/assets/images/screen/facility/\346\220\234\347\264\242\346\214\211\351\222\256.png" +++ /dev/null Binary files differ diff --git "a/src/assets/images/screen/facility/\347\273\264\344\277\256.png" "b/src/assets/images/screen/facility/\347\273\264\344\277\256.png" deleted file mode 100644 index 30c5766..0000000 --- "a/src/assets/images/screen/facility/\347\273\264\344\277\256.png" +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/head-left.png b/src/assets/images/screen/head-left.png deleted file mode 100644 index 950e178..0000000 --- a/src/assets/images/screen/head-left.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/head-right.png b/src/assets/images/screen/head-right.png deleted file mode 100644 index 1976e33..0000000 --- a/src/assets/images/screen/head-right.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/head.png b/src/assets/images/screen/head.png deleted file mode 100644 index 5605651..0000000 --- a/src/assets/images/screen/head.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/irrigate/leftbox.png b/src/assets/images/screen/irrigate/leftbox.png deleted file mode 100644 index 0bb5776..0000000 --- a/src/assets/images/screen/irrigate/leftbox.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/irrigate/mapbg.png b/src/assets/images/screen/irrigate/mapbg.png deleted file mode 100644 index 692b688..0000000 --- a/src/assets/images/screen/irrigate/mapbg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/irrigate/mapdh.png b/src/assets/images/screen/irrigate/mapdh.png deleted file mode 100644 index a2f40c5..0000000 --- a/src/assets/images/screen/irrigate/mapdh.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/irrigate/titbox.png b/src/assets/images/screen/irrigate/titbox.png deleted file mode 100644 index 9b40d8e..0000000 --- a/src/assets/images/screen/irrigate/titbox.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/loginOut.png b/src/assets/images/screen/loginOut.png deleted file mode 100644 index 582f66e..0000000 --- a/src/assets/images/screen/loginOut.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/border.png b/src/assets/images/screen/overview/border.png deleted file mode 100644 index 8897a76..0000000 --- a/src/assets/images/screen/overview/border.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/circle1.png b/src/assets/images/screen/overview/circle1.png deleted file mode 100644 index fbed8e7..0000000 --- a/src/assets/images/screen/overview/circle1.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/circle2.png b/src/assets/images/screen/overview/circle2.png deleted file mode 100644 index 87338d6..0000000 --- a/src/assets/images/screen/overview/circle2.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/circle3.png b/src/assets/images/screen/overview/circle3.png deleted file mode 100644 index 5ddd708..0000000 --- a/src/assets/images/screen/overview/circle3.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/icon.png b/src/assets/images/screen/overview/icon.png deleted file mode 100644 index 7e8c53f..0000000 --- a/src/assets/images/screen/overview/icon.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/item-delete.png b/src/assets/images/screen/overview/item-delete.png deleted file mode 100644 index e08b0ef..0000000 --- a/src/assets/images/screen/overview/item-delete.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/map.png b/src/assets/images/screen/overview/map.png deleted file mode 100644 index 446a5e7..0000000 --- a/src/assets/images/screen/overview/map.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/maplot.png b/src/assets/images/screen/overview/maplot.png deleted file mode 100644 index b85dfb8..0000000 --- a/src/assets/images/screen/overview/maplot.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/mini-circle.png b/src/assets/images/screen/overview/mini-circle.png deleted file mode 100644 index 6ee1d76..0000000 --- a/src/assets/images/screen/overview/mini-circle.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/mini-map.png b/src/assets/images/screen/overview/mini-map.png deleted file mode 100644 index 6a46816..0000000 --- a/src/assets/images/screen/overview/mini-map.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/msgbox.png b/src/assets/images/screen/overview/msgbox.png deleted file mode 100644 index bb49387..0000000 --- a/src/assets/images/screen/overview/msgbox.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/overview/point1.png b/src/assets/images/screen/overview/point1.png deleted file mode 100644 index 8789cb8..0000000 --- a/src/assets/images/screen/overview/point1.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/pump/bottom-bg.png b/src/assets/images/screen/pump/bottom-bg.png deleted file mode 100644 index f5c97f5..0000000 --- a/src/assets/images/screen/pump/bottom-bg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/pump/center-bg.png b/src/assets/images/screen/pump/center-bg.png deleted file mode 100644 index bd53047..0000000 --- a/src/assets/images/screen/pump/center-bg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/pump/flow.png b/src/assets/images/screen/pump/flow.png deleted file mode 100644 index ea2aa87..0000000 --- a/src/assets/images/screen/pump/flow.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/pump/item_bg.png b/src/assets/images/screen/pump/item_bg.png deleted file mode 100644 index c9f92e8..0000000 --- a/src/assets/images/screen/pump/item_bg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/pump/liquid.png b/src/assets/images/screen/pump/liquid.png deleted file mode 100644 index e419796..0000000 --- a/src/assets/images/screen/pump/liquid.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/pump/model.png b/src/assets/images/screen/pump/model.png deleted file mode 100644 index b3b0d3d..0000000 --- a/src/assets/images/screen/pump/model.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/pump/pressure.png b/src/assets/images/screen/pump/pressure.png deleted file mode 100644 index f1cee26..0000000 --- a/src/assets/images/screen/pump/pressure.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/pump/status.png b/src/assets/images/screen/pump/status.png deleted file mode 100644 index 61b31bb..0000000 --- a/src/assets/images/screen/pump/status.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/pump/title.png b/src/assets/images/screen/pump/title.png deleted file mode 100644 index b6938d2..0000000 --- a/src/assets/images/screen/pump/title.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/revenue/balance.png b/src/assets/images/screen/revenue/balance.png deleted file mode 100644 index 9571bcf..0000000 --- a/src/assets/images/screen/revenue/balance.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/revenue/down-icon.png b/src/assets/images/screen/revenue/down-icon.png deleted file mode 100644 index daef450..0000000 --- a/src/assets/images/screen/revenue/down-icon.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/revenue/icon.png b/src/assets/images/screen/revenue/icon.png deleted file mode 100644 index f5250a9..0000000 --- a/src/assets/images/screen/revenue/icon.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/revenue/up-icon.png b/src/assets/images/screen/revenue/up-icon.png deleted file mode 100644 index 472d1fc..0000000 --- a/src/assets/images/screen/revenue/up-icon.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/revenue/user-quantity.png b/src/assets/images/screen/revenue/user-quantity.png deleted file mode 100644 index 61917c4..0000000 --- a/src/assets/images/screen/revenue/user-quantity.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/revenue/user-type.png b/src/assets/images/screen/revenue/user-type.png deleted file mode 100644 index 6df5989..0000000 --- a/src/assets/images/screen/revenue/user-type.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/revenue/user-up.png b/src/assets/images/screen/revenue/user-up.png deleted file mode 100644 index de04dcf..0000000 --- a/src/assets/images/screen/revenue/user-up.png +++ /dev/null Binary files differ diff --git "a/src/assets/images/screen/revenue/\347\224\250\346\210\267\347\274\264\350\264\271\346\203\205\345\206\265.png" "b/src/assets/images/screen/revenue/\347\224\250\346\210\267\347\274\264\350\264\271\346\203\205\345\206\265.png" deleted file mode 100644 index bdf4ed6..0000000 --- "a/src/assets/images/screen/revenue/\347\224\250\346\210\267\347\274\264\350\264\271\346\203\205\345\206\265.png" +++ /dev/null Binary files differ diff --git "a/src/assets/images/screen/revenue/\347\224\250\346\210\267\347\274\264\350\264\271\346\203\205\345\206\265@2x.png" "b/src/assets/images/screen/revenue/\347\224\250\346\210\267\347\274\264\350\264\271\346\203\205\345\206\265@2x.png" deleted file mode 100644 index 30393d7..0000000 --- "a/src/assets/images/screen/revenue/\347\224\250\346\210\267\347\274\264\350\264\271\346\203\205\345\206\265@2x.png" +++ /dev/null Binary files differ diff --git "a/src/assets/images/screen/revenue/\347\237\251\345\275\242 651.png" "b/src/assets/images/screen/revenue/\347\237\251\345\275\242 651.png" deleted file mode 100644 index 687a328..0000000 --- "a/src/assets/images/screen/revenue/\347\237\251\345\275\242 651.png" +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/statistics/date.png b/src/assets/images/screen/statistics/date.png deleted file mode 100644 index e47fded..0000000 --- a/src/assets/images/screen/statistics/date.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/statistics/echarts-box.png b/src/assets/images/screen/statistics/echarts-box.png deleted file mode 100644 index 987312b..0000000 --- a/src/assets/images/screen/statistics/echarts-box.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/statistics/point.png b/src/assets/images/screen/statistics/point.png deleted file mode 100644 index 2f00092..0000000 --- a/src/assets/images/screen/statistics/point.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/statistics/select-date.png b/src/assets/images/screen/statistics/select-date.png deleted file mode 100644 index ec57e9a..0000000 --- a/src/assets/images/screen/statistics/select-date.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/statistics/select.png b/src/assets/images/screen/statistics/select.png deleted file mode 100644 index 5c30df0..0000000 --- a/src/assets/images/screen/statistics/select.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/statistics/title-icon.png b/src/assets/images/screen/statistics/title-icon.png deleted file mode 100644 index d001ce9..0000000 --- a/src/assets/images/screen/statistics/title-icon.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/titbox.png b/src/assets/images/screen/titbox.png deleted file mode 100644 index 9b40d8e..0000000 --- a/src/assets/images/screen/titbox.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/userImg.png b/src/assets/images/screen/userImg.png deleted file mode 100644 index 3e8ed9c..0000000 --- a/src/assets/images/screen/userImg.png +++ /dev/null Binary files differ diff --git a/src/assets/images/technology/arrow.png b/src/assets/images/technology/arrow.png deleted file mode 100644 index 4256338..0000000 --- a/src/assets/images/technology/arrow.png +++ /dev/null Binary files differ diff --git a/src/assets/images/technology/arrow_red.png b/src/assets/images/technology/arrow_red.png deleted file mode 100644 index e9b54bd..0000000 --- a/src/assets/images/technology/arrow_red.png +++ /dev/null Binary files differ diff --git a/src/assets/images/technology/icon_jyj.png b/src/assets/images/technology/icon_jyj.png deleted file mode 100644 index 8d8007d..0000000 --- a/src/assets/images/technology/icon_jyj.png +++ /dev/null Binary files differ diff --git a/src/assets/images/technology/icon_pac.png b/src/assets/images/technology/icon_pac.png deleted file mode 100644 index 381ca7e..0000000 --- a/src/assets/images/technology/icon_pac.png +++ /dev/null Binary files differ diff --git a/src/assets/images/technology/jy_cs_main_img.png b/src/assets/images/technology/jy_cs_main_img.png deleted file mode 100644 index 53d0e01..0000000 --- a/src/assets/images/technology/jy_cs_main_img.png +++ /dev/null Binary files differ diff --git a/src/assets/images/technology/jy_main_img.png b/src/assets/images/technology/jy_main_img.png deleted file mode 100644 index 60c1138..0000000 --- a/src/assets/images/technology/jy_main_img.png +++ /dev/null Binary files differ diff --git a/src/assets/images/technology/ps_main_img.png b/src/assets/images/technology/ps_main_img.png deleted file mode 100644 index 48167dd..0000000 --- a/src/assets/images/technology/ps_main_img.png +++ /dev/null Binary files differ diff --git a/src/assets/images/technology/tech_main_img.png b/src/assets/images/technology/tech_main_img.png deleted file mode 100644 index 34ec8ac..0000000 --- a/src/assets/images/technology/tech_main_img.png +++ /dev/null Binary files differ diff --git a/src/assets/images/technology/zs_main_img.png b/src/assets/images/technology/zs_main_img.png deleted file mode 100644 index 782597b..0000000 --- a/src/assets/images/technology/zs_main_img.png +++ /dev/null Binary files differ diff --git "a/src/assets/images/technology/\345\216\237\346\260\264@2x.png" "b/src/assets/images/technology/\345\216\237\346\260\264@2x.png" deleted file mode 100644 index 7327d95..0000000 --- "a/src/assets/images/technology/\345\216\237\346\260\264@2x.png" +++ /dev/null Binary files differ diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue deleted file mode 100644 index 7d0888c..0000000 --- a/src/components/DictTag/index.vue +++ /dev/null @@ -1,82 +0,0 @@ -<template> - <div> - <template v-for="(item, index) in options"> - <template v-if="values.includes(item.value)"> - <span - v-if="(item.elTagType == 'default' || item.elTagType == '') && (item.elTagClass == '' || item.elTagClass == null)" - :key="item.value" - :index="index" - :class="item.elTagClass" - >{{ item.label + " " }}</span> - <el-tag - v-else - :disable-transitions="true" - :key="item.value + ''" - :index="index" - :type="item.elTagType === 'primary' ? '' : item.elTagType" - :class="item.elTagClass" - >{{ item.label + " " }}</el-tag> - </template> - </template> - <template v-if="unmatch && showValue"> - {{ unmatchArray | handleArray }} - </template> - </div> -</template> - -<script setup> -// 记录未匹配的项 -const unmatchArray = ref([]); - -const props = defineProps({ - // 数据 - options: { - type: Array, - default: null, - }, - // 当前的值 - value: [Number, String, Array], - // 当未找到匹配的数据时,显示value - showValue: { - type: Boolean, - default: true, - }, - separator: { - type: String, - default: ",", - } -}); - -const values = computed(() => { - if (props.value === null || typeof props.value === 'undefined' || props.value === '') return []; - return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator); -}); - -const unmatch = computed(() => { - unmatchArray.value = []; - // 没有value不显示 - if (props.value === null || typeof props.value === 'undefined' || props.value === '' || props.options.length === 0) return false - // 传入值为数组 - let unmatch = false // 添加一个标志来判断是否有未匹配项 - values.value.forEach(item => { - if (!props.options.some(v => v.value === item)) { - unmatchArray.value.push(item) - unmatch = true // 如果有未匹配项,将标志设置为true - } - }) - return unmatch // 返回标志的值 -}); - -function handleArray(array) { - if (array.length === 0) return ""; - return array.reduce((pre, cur) => { - return pre + " " + cur; - }); -} -</script> - -<style scoped> -.el-tag + .el-tag { - margin-left: 10px; -} -</style> diff --git a/src/components/EchartsArea/index.vue b/src/components/EchartsArea/index.vue deleted file mode 100644 index f9a451e..0000000 --- a/src/components/EchartsArea/index.vue +++ /dev/null @@ -1,144 +0,0 @@ -<!-- - * @Author: Liuyi candymxq888@outlook.com - * @Date: 2024-07-22 09:07:29 - * @LastEditors: Liuyi candymxq888@outlook.com - * @LastEditTime: 2024-07-31 17:08:56 - * @FilePath: \water-pipenet-web\src\views\DMA\pressure\index.vue - * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE ---> -<template> - <div> - <div id="eChart" style="width:95%; height:350px;"></div> - </div> -</template> - - <script setup> - import * as echarts from 'echarts' - import { onMounted } from 'vue'; - const props = defineProps({ - modelValue:{ - type:Array, - default:[], - required:true, - }, - title:{ - type:String, - default:'', - required:true - } - }) - const dataList = ref(props.modelValue) - /** - * Echarts 图表 - */ - let myChart - let options - //初始化Echarts - let initCharts = () =>{ - let chartDom = document.getElementById('eChart'); - myChart = echarts.init(chartDom); - } - //设置Echarts配置项 - const setEchartsOptions = () =>{ - let data = JSON.parse(JSON.stringify(dataList.value)); - // console.log('子Options',data); - options = { - title: { - left:'3%', - text: props.title, - textStyle:{ - fontSize:18, - color:'#196FE1', - fontWeight:400 - } - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'line' , - lineStyle:{ - color:'#f3eadc', - }, - snap:true, - }, - }, - grid: { - left:'5%', - bottom: '10%' - }, - dataset: { - source:data - }, - xAxis: { - name:'上传时间', - boundaryGap:false, - type: 'category', - axisPointer:{ - animation:true, - animationEasing:'cubicOut', - animationDuration:5000 - } - }, - yAxis: { - type: 'value', - boundaryGap:false, - }, - series: [ - { - name: 'pressure', - type: 'line', - symbol: 'none', - animationDuration: 1500, - animationEasing: 'sinusoidalInOut', - itemStyle: { - color: 'none' - }, - smooth:true, - encode: { - x: 0, - y: 1 - }, - areaStyle: { - color: new echarts.graphic.LinearGradient( - 0, 0, 0, 1, - [ - {offset: 0, color:'#ff3200'}, - {offset: 0.2, color:'#ff0000'}, - {offset: 1, color:'#ff6300'} - ] - ) - } - } - ], - animation: true , - } - myChart.clear() - myChart.setOption(options,true) - } - watchEffect(() =>{ - dataList.value = props.modelValue - if(myChart){ - setEchartsOptions() - }else{ - console.log('myChart不存在',myChart); - } -}) - onMounted(() =>{ - initCharts() - setEchartsOptions() - }) - onBeforeUnmount(() =>{ - if (myChart && myChart.dispose){ - myChart.dispose(); - myChart = null; - } - }) - </script> - - <style lang="scss" scoped> - #pressure{ - box-shadow: 0 0 15px 2px #e8e9ec; - border-radius: 10px; - margin: 20px auto; - } - </style> \ No newline at end of file diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue deleted file mode 100644 index 0a696f2..0000000 --- a/src/components/Editor/index.vue +++ /dev/null @@ -1,251 +0,0 @@ -<template> - <div> - <el-upload - :action="uploadUrl" - :before-upload="handleBeforeUpload" - :on-success="handleUploadSuccess" - :on-error="handleUploadError" - name="file" - :show-file-list="false" - :headers="headers" - class="editor-img-uploader" - v-if="type == 'url'" - > - <i ref="uploadRef" class="editor-img-uploader"></i> - </el-upload> - </div> - <div class="editor"> - <quill-editor - ref="quillEditorRef" - v-model:content="content" - contentType="html" - @textChange="(e) => $emit('update:modelValue', content)" - :options="options" - :style="styles" - /> - </div> -</template> - -<script setup> -import { QuillEditor } from "@vueup/vue-quill"; -import "@vueup/vue-quill/dist/vue-quill.snow.css"; -import { getToken } from "@/utils/auth"; - -const { proxy } = getCurrentInstance(); - -const quillEditorRef = ref(); -const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址 -const headers = ref({ - Authorization: "Bearer " + getToken() -}); - -const props = defineProps({ - /* 编辑器的内容 */ - modelValue: { - type: String, - }, - /* 高度 */ - height: { - type: Number, - default: null, - }, - /* 最小高度 */ - minHeight: { - type: Number, - default: null, - }, - /* 只读 */ - readOnly: { - type: Boolean, - default: false, - }, - /* 上传文件大小限制(MB) */ - fileSize: { - type: Number, - default: 5, - }, - /* 类型(base64格式、url格式) */ - type: { - type: String, - default: "url", - } -}); - -const options = ref({ - theme: "snow", - bounds: document.body, - debug: "warn", - modules: { - // 工具栏配置 - toolbar: [ - ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 - ["blockquote", "code-block"], // 引用 代码块 - [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表 - [{ indent: "-1" }, { indent: "+1" }], // 缩进 - [{ size: ["small", false, "large", "huge"] }], // 字体大小 - [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 - [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 - [{ align: [] }], // 对齐方式 - ["clean"], // 清除文本格式 - ["link", "image", "video"] // 链接、图片、视频 - ], - }, - placeholder: "请输入内容", - readOnly: props.readOnly -}); - -const styles = computed(() => { - let style = {}; - if (props.minHeight) { - style.minHeight = `${props.minHeight}px`; - } - if (props.height) { - style.height = `${props.height}px`; - } - return style; -}); - -const content = ref(""); -watch(() => props.modelValue, (v) => { - if (v !== content.value) { - content.value = v === undefined ? "<p></p>" : v; - } -}, { immediate: true }); - -// 如果设置了上传地址则自定义图片上传事件 -onMounted(() => { - if (props.type == 'url') { - let quill = quillEditorRef.value.getQuill(); - let toolbar = quill.getModule("toolbar"); - toolbar.addHandler("image", (value) => { - if (value) { - proxy.$refs.uploadRef.click(); - } else { - quill.format("image", false); - } - }); - } -}); - -// 上传前校检格式和大小 -function handleBeforeUpload(file) { - const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"]; - const isJPG = type.includes(file.type); - //检验文件格式 - if (!isJPG) { - proxy.$modal.msgError(`图片格式错误!`); - return false; - } - // 校检文件大小 - if (props.fileSize) { - const isLt = file.size / 1024 / 1024 < props.fileSize; - if (!isLt) { - proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`); - return false; - } - } - return true; -} - -// 上传成功处理 -function handleUploadSuccess(res, file) { - // 如果上传成功 - if (res.code == 200) { - // 获取富文本实例 - let quill = toRaw(quillEditorRef.value).getQuill(); - // 获取光标位置 - let length = quill.selection.savedRange.index; - // 插入图片,res.url为服务器返回的图片链接地址 - quill.insertEmbed(length, "image", import.meta.env.VITE_APP_BASE_API + res.fileName); - // 调整光标到最后 - quill.setSelection(length + 1); - } else { - proxy.$modal.msgError("图片插入失败"); - } -} - -// 上传失败处理 -function handleUploadError() { - proxy.$modal.msgError("图片插入失败"); -} -</script> - -<style> -.editor-img-uploader { - display: none; -} -.editor, .ql-toolbar { - white-space: pre-wrap !important; - line-height: normal !important; -} -.quill-img { - display: none; -} -.ql-snow .ql-tooltip[data-mode="link"]::before { - content: "请输入链接地址:"; -} -.ql-snow .ql-tooltip.ql-editing a.ql-action::after { - border-right: 0px; - content: "保存"; - padding-right: 0px; -} -.ql-snow .ql-tooltip[data-mode="video"]::before { - content: "请输入视频地址:"; -} -.ql-snow .ql-picker.ql-size .ql-picker-label::before, -.ql-snow .ql-picker.ql-size .ql-picker-item::before { - content: "14px"; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { - content: "10px"; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { - content: "18px"; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { - content: "32px"; -} -.ql-snow .ql-picker.ql-header .ql-picker-label::before, -.ql-snow .ql-picker.ql-header .ql-picker-item::before { - content: "文本"; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { - content: "标题1"; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { - content: "标题2"; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { - content: "标题3"; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { - content: "标题4"; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { - content: "标题5"; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { - content: "标题6"; -} -.ql-snow .ql-picker.ql-font .ql-picker-label::before, -.ql-snow .ql-picker.ql-font .ql-picker-item::before { - content: "标准字体"; -} -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { - content: "衬线字体"; -} -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { - content: "等宽字体"; -} -</style> diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue deleted file mode 100644 index cd25856..0000000 --- a/src/components/FileUpload/index.vue +++ /dev/null @@ -1,207 +0,0 @@ -<template> - <div class="upload-file"> - <el-upload - multiple - :action="uploadFileUrl" - :before-upload="handleBeforeUpload" - :file-list="fileList" - :limit="limit" - :on-error="handleUploadError" - :on-exceed="handleExceed" - :on-success="handleUploadSuccess" - :show-file-list="false" - :headers="headers" - class="upload-file-uploader" - ref="fileUpload" - > - <!-- 上传按钮 --> - <el-button type="primary">选取文件</el-button> - </el-upload> - <!-- 上传提示 --> - <div class="el-upload__tip" v-if="showTip"> - 请上传 - <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template> - <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template> - 的文件 - </div> - <!-- 文件列表 --> - <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> - <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList"> - <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank"> - <span class="el-icon-document"> {{ getFileName(file.name) }} </span> - </el-link> - <div class="ele-upload-list__item-content-action"> - <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link> - </div> - </li> - </transition-group> - </div> -</template> - -<script setup> -import { getToken } from "@/utils/auth"; - -const props = defineProps({ - modelValue: [String, Object, Array], - // 数量限制 - limit: { - type: Number, - default: 5, - }, - // 大小限制(MB) - fileSize: { - type: Number, - default: 5, - }, - // 文件类型, 例如['png', 'jpg', 'jpeg'] - fileType: { - type: Array, - default: () => ["doc", "xls", "ppt", "txt", "pdf"], - }, - // 是否显示提示 - isShowTip: { - type: Boolean, - default: true - } -}); - -const { proxy } = getCurrentInstance(); -const emit = defineEmits(); -const number = ref(0); -const uploadList = ref([]); -const baseUrl = import.meta.env.VITE_APP_B_API; -const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址 -const headers = ref({ Authorization: "Bearer " + getToken() }); -const fileList = ref([]); -const showTip = computed( - () => props.isShowTip && (props.fileType || props.fileSize) -); - -watch(() => props.modelValue, val => { - if (val) { - let temp = 1; - // 首先将值转为数组 - const list = Array.isArray(val) ? val : props.modelValue.split(','); - // 然后将数组转为对象数组 - fileList.value = list.map(item => { - if (typeof item === "string") { - item = { name: item, url: item }; - } - item.uid = item.uid || new Date().getTime() + temp++; - return item; - }); - } else { - fileList.value = []; - return []; - } -},{ deep: true, immediate: true }); - -// 上传前校检格式和大小 -function handleBeforeUpload(file) { - // 校检文件类型 - if (props.fileType.length) { - const fileName = file.name.split('.'); - const fileExt = fileName[fileName.length - 1]; - const isTypeOk = props.fileType.indexOf(fileExt) >= 0; - if (!isTypeOk) { - proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`); - return false; - } - } - // 校检文件大小 - if (props.fileSize) { - const isLt = file.size / 1024 / 1024 < props.fileSize; - if (!isLt) { - proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`); - return false; - } - } - proxy.$modal.loading("正在上传文件,请稍候..."); - number.value++; - return true; -} - -// 文件个数超出 -function handleExceed() { - proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`); -} - -// 上传失败 -function handleUploadError(err) { - proxy.$modal.msgError("上传文件失败"); -} - -// 上传成功回调 -function handleUploadSuccess(res, file) { - if (res.code === 200) { - uploadList.value.push({ name: res.fileName, url: res.fileName }); - uploadedSuccessfully(); - } else { - number.value--; - proxy.$modal.closeLoading(); - proxy.$modal.msgError(res.msg); - proxy.$refs.fileUpload.handleRemove(file); - uploadedSuccessfully(); - } -} - -// 删除文件 -function handleDelete(index) { - fileList.value.splice(index, 1); - emit("update:modelValue", listToString(fileList.value)); -} - -// 上传结束处理 -function uploadedSuccessfully() { - if (number.value > 0 && uploadList.value.length === number.value) { - fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value); - uploadList.value = []; - number.value = 0; - emit("update:modelValue", listToString(fileList.value)); - proxy.$modal.closeLoading(); - } -} - -// 获取文件名称 -function getFileName(name) { - // 如果是url那么取最后的名字 如果不是直接返回 - if (name.lastIndexOf("/") > -1) { - return name.slice(name.lastIndexOf("/") + 1); - } else { - return name; - } -} - -// 对象转成指定字符串分隔 -function listToString(list, separator) { - let strs = ""; - separator = separator || ","; - for (let i in list) { - if (list[i].url) { - strs += list[i].url + separator; - } - } - return strs != '' ? strs.substr(0, strs.length - 1) : ''; -} -</script> - -<style scoped lang="scss"> -.upload-file-uploader { - margin-bottom: 5px; -} -.upload-file-list .el-upload-list__item { - border: 1px solid #e4e7ed; - line-height: 2; - margin-bottom: 10px; - position: relative; -} -.upload-file-list .ele-upload-list__item-content { - display: flex; - justify-content: space-between; - align-items: center; - color: inherit; -} -.ele-upload-list__item-content-action .el-link { - margin-right: 10px; -} -</style> diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue deleted file mode 100644 index 7e3d2b6..0000000 --- a/src/components/ImagePreview/index.vue +++ /dev/null @@ -1,92 +0,0 @@ -<template> - <el-image - :src="`${realSrc}`" - fit="cover" - :style="`width:${realWidth};height:${realHeight};`" - :preview-src-list="realSrcList" - preview-teleported - > - <template #error> - <div class="image-slot"> - <el-icon><picture-filled /></el-icon> - </div> - </template> - </el-image> -</template> - -<script setup> -import { isExternal } from "@/utils/validate"; - -const props = defineProps({ - src: { - type: String, - default: "" - }, - width: { - type: [Number, String], - default: "" - }, - height: { - type: [Number, String], - default: "" - } -}); - -const realSrc = computed(() => { - if (!props.src) { - return; - } - let real_src = props.src.split(",")[0]; - if (isExternal(real_src)) { - return real_src; - } - return import.meta.env.VITE_APP_BASE_API + real_src; -}); - -const realSrcList = computed(() => { - if (!props.src) { - return; - } - let real_src_list = props.src.split(","); - let srcList = []; - real_src_list.forEach(item => { - if (isExternal(item)) { - return srcList.push(item); - } - return srcList.push(import.meta.env.VITE_APP_BASE_API + item); - }); - return srcList; -}); - -const realWidth = computed(() => - typeof props.width == "string" ? props.width : `${props.width}px` -); - -const realHeight = computed(() => - typeof props.height == "string" ? props.height : `${props.height}px` -); -</script> - -<style lang="scss" scoped> -.el-image { - border-radius: 5px; - background-color: #ebeef5; - box-shadow: 0 0 5px 1px #ccc; - :deep(.el-image__inner) { - transition: all 0.3s; - cursor: pointer; - &:hover { - transform: scale(1.2); - } - } - :deep(.image-slot) { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - color: #909399; - font-size: 30px; - } -} -</style> diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue deleted file mode 100644 index 55dafb8..0000000 --- a/src/components/ImageUpload/index.vue +++ /dev/null @@ -1,213 +0,0 @@ -<template> - <div class="component-upload-image"> - <el-upload - multiple - :action="uploadImgUrl" - list-type="picture-card" - :on-success="handleUploadSuccess" - :before-upload="handleBeforeUpload" - :limit="limit" - :on-error="handleUploadError" - :on-exceed="handleExceed" - ref="imageUpload" - :before-remove="handleDelete" - :show-file-list="true" - :headers="headers" - :file-list="fileList" - :on-preview="handlePictureCardPreview" - :class="{ hide: fileList.length >= limit }" - > - <el-icon class="avatar-uploader-icon"><plus /></el-icon> - </el-upload> - <!-- 上传提示 --> - <div class="el-upload__tip" v-if="showTip"> - 请上传 - <template v-if="fileSize"> - 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> - </template> - <template v-if="fileType"> - 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> - </template> - 的文件 - </div> - - <el-dialog - v-model="dialogVisible" - title="预览" - width="800px" - append-to-body - > - <img - :src="dialogImageUrl" - style="display: block; max-width: 100%; margin: 0 auto" - /> - </el-dialog> - </div> -</template> - -<script setup> -import { getToken } from "@/utils/auth"; - -const props = defineProps({ - modelValue: [String, Object, Array], - // 图片数量限制 - limit: { - type: Number, - default: 5, - }, - // 大小限制(MB) - fileSize: { - type: Number, - default: 5, - }, - // 文件类型, 例如['png', 'jpg', 'jpeg'] - fileType: { - type: Array, - default: () => ["png", "jpg", "jpeg"], - }, - // 是否显示提示 - isShowTip: { - type: Boolean, - default: true - }, -}); - -const { proxy } = getCurrentInstance(); -const emit = defineEmits(); -const number = ref(0); -const uploadList = ref([]); -const dialogImageUrl = ref(""); -const dialogVisible = ref(false); -const baseUrl = import.meta.env.VITE_APP_BASE_API; -const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址 -const headers = ref({ Authorization: "Bearer " + getToken() }); -const fileList = ref([]); -const showTip = computed( - () => props.isShowTip && (props.fileType || props.fileSize) -); - -watch(() => props.modelValue, val => { - if (val) { - // 首先将值转为数组 - const list = Array.isArray(val) ? val : props.modelValue.split(","); - // 然后将数组转为对象数组 - fileList.value = list.map(item => { - if (typeof item === "string") { - if (item.indexOf(baseUrl) === -1) { - item = { name: baseUrl + item, url: baseUrl + item }; - } else { - item = { name: item, url: item }; - } - } - return item; - }); - } else { - fileList.value = []; - return []; - } -},{ deep: true, immediate: true }); - -// 上传前loading加载 -function handleBeforeUpload(file) { - let isImg = false; - if (props.fileType.length) { - let fileExtension = ""; - if (file.name.lastIndexOf(".") > -1) { - fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); - } - isImg = props.fileType.some(type => { - if (file.type.indexOf(type) > -1) return true; - if (fileExtension && fileExtension.indexOf(type) > -1) return true; - return false; - }); - } else { - isImg = file.type.indexOf("image") > -1; - } - if (!isImg) { - proxy.$modal.msgError( - `文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!` - ); - return false; - } - if (props.fileSize) { - const isLt = file.size / 1024 / 1024 < props.fileSize; - if (!isLt) { - proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`); - return false; - } - } - proxy.$modal.loading("正在上传图片,请稍候..."); - number.value++; -} - -// 文件个数超出 -function handleExceed() { - proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`); -} - -// 上传成功回调 -function handleUploadSuccess(res, file) { - if (res.code === 200) { - uploadList.value.push({ name: res.fileName, url: res.fileName }); - uploadedSuccessfully(); - } else { - number.value--; - proxy.$modal.closeLoading(); - proxy.$modal.msgError(res.msg); - proxy.$refs.imageUpload.handleRemove(file); - uploadedSuccessfully(); - } -} - -// 删除图片 -function handleDelete(file) { - const findex = fileList.value.map(f => f.name).indexOf(file.name); - if (findex > -1 && uploadList.value.length === number.value) { - fileList.value.splice(findex, 1); - emit("update:modelValue", listToString(fileList.value)); - return false; - } -} - -// 上传结束处理 -function uploadedSuccessfully() { - if (number.value > 0 && uploadList.value.length === number.value) { - fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value); - uploadList.value = []; - number.value = 0; - emit("update:modelValue", listToString(fileList.value)); - proxy.$modal.closeLoading(); - } -} - -// 上传失败 -function handleUploadError() { - proxy.$modal.msgError("上传图片失败"); - proxy.$modal.closeLoading(); -} - -// 预览 -function handlePictureCardPreview(file) { - dialogImageUrl.value = file.url; - dialogVisible.value = true; -} - -// 对象转成指定字符串分隔 -function listToString(list, separator) { - let strs = ""; - separator = separator || ","; - for (let i in list) { - if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) { - strs += list[i].url.replace(baseUrl, "") + separator; - } - } - return strs != "" ? strs.substr(0, strs.length - 1) : ""; -} -</script> - -<style scoped lang="scss"> -// .el-upload--picture-card 控制加号部分 -:deep(.hide .el-upload--picture-card) { - display: none; -} -</style> \ No newline at end of file diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue deleted file mode 100644 index 5a53dd4..0000000 --- a/src/components/RightToolbar/index.vue +++ /dev/null @@ -1,134 +0,0 @@ -<template> - <div class="top-right-btn" :style="style"> - <el-row> - <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search"> - <el-button circle icon="Search" @click="toggleSearch()" /> - </el-tooltip> - <el-tooltip class="item" effect="dark" content="刷新" placement="top"> - <el-button circle icon="Refresh" @click="refresh()" /> - </el-tooltip> - <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns"> - <el-button circle icon="Menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/> - <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'"> - <el-button circle icon="Menu" /> - <template #dropdown> - <el-dropdown-menu> - <template v-for="item in columns" :key="item.key"> - <el-dropdown-item> - <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" /> - </el-dropdown-item> - </template> - </el-dropdown-menu> - </template> - </el-dropdown> - </el-tooltip> - </el-row> - <el-dialog :title="title" v-model="open" append-to-body> - <el-transfer - :titles="['显示', '隐藏']" - v-model="value" - :data="columns" - @change="dataChange" - ></el-transfer> - </el-dialog> - </div> -</template> - -<script setup> -const props = defineProps({ - /* 是否显示检索条件 */ - showSearch: { - type: Boolean, - default: true, - }, - /* 显隐列信息 */ - columns: { - type: Array, - }, - /* 是否显示检索图标 */ - search: { - type: Boolean, - default: true, - }, - /* 显隐列类型(transfer穿梭框、checkbox复选框) */ - showColumnsType: { - type: String, - default: "checkbox", - }, - /* 右外边距 */ - gutter: { - type: Number, - default: 10, - }, -}) - -const emits = defineEmits(['update:showSearch', 'queryTable']); - -// 显隐数据 -const value = ref([]); -// 弹出层标题 -const title = ref("显示/隐藏"); -// 是否显示弹出层 -const open = ref(false); - -const style = computed(() => { - const ret = {}; - if (props.gutter) { - ret.marginRight = `${props.gutter / 2}px`; - } - return ret; -}); - -// 搜索 -function toggleSearch() { - emits("update:showSearch", !props.showSearch); -} - -// 刷新 -function refresh() { - emits("queryTable"); -} - -// 右侧列表元素变化 -function dataChange(data) { - for (let item in props.columns) { - const key = props.columns[item].key; - props.columns[item].visible = !data.includes(key); - } -} - -// 打开显隐列dialog -function showColumn() { - open.value = true; -} - -if (props.showColumnsType == 'transfer') { - // 显隐列初始默认隐藏列 - for (let item in props.columns) { - if (props.columns[item].visible === false) { - value.value.push(parseInt(item)); - } - } -} - -// 勾选 -function checkboxChange(event, label) { - props.columns.filter(item => item.label == label)[0].visible = event; -} - -</script> - -<style lang='scss' scoped> -:deep(.el-transfer__button) { - border-radius: 50%; - display: block; - margin-left: 0px; -} -:deep(.el-transfer__button:first-child) { - margin-bottom: 10px; -} -:deep(.el-dropdown-menu__item) { - line-height: 30px; - padding: 0 17px; -} -</style> diff --git a/src/components/UploadFile/index.vue b/src/components/UploadFile/index.vue deleted file mode 100644 index 1e86232..0000000 --- a/src/components/UploadFile/index.vue +++ /dev/null @@ -1,90 +0,0 @@ -<!-- - * @Author: Liuyi candymxq888@outlook.com - * @Date: 2024-08-08 10:29:19 - * @LastEditors: Liuyi candymxq888@outlook.com - * @LastEditTime: 2024-10-14 10:47:17 - * @FilePath: \water-qinghe-web\src\components\upload\uploadIcon.vue - * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE ---> -<template> - <el-upload class="uploader" :show-file-list="false" - :before-upload="beforeAvatarUpload" :http-request="uploadImg"> - <img v-if="imageUrl" :src="imageUrl"/> - <el-icon v-else class="uploader-icon"> - <Plus /> - </el-icon> - </el-upload> -</template> - -<script setup> -import { Plus } from '@element-plus/icons-vue' -import { upload } from '@/api/basicApi/index' -import { PREURL } from '@/config/index' -const { proxy } = getCurrentInstance(); -const preUrl = PREURL -const props = defineProps({ - image: { - type: String, - default: '' - } -}) -const emit = defineEmits(['uploadData']) -const imageUrl = ref('') - -const beforeAvatarUpload = (rawFile) => { - if (rawFile.size / 1024 / 1024 > 2) { - proxy.$modal.msgError('图片大小不能超过2MB!') - return false - } - return true -} -//上传图片调用接口 -const uploadImg = async (params) => { - //建立表单,请求参数传表单形式 - let form = new FormData(); - form.append("file1", params.file); - form.append("fileId", params.file.lastModified); - form.append("path", 'qinghe'); - //发出上传文件请求 - let res = await upload().uploadFile(form) - if (res.code == 200) { - //返回的图片网络地址传给form - proxy.$modal.msgSuccess('上传图片成功') - imageUrl.value = res.data.newFileName - emit('uploadData', imageUrl.value) - } -} -onMounted(() => { - imageUrl.value = '' -}) -// 监听props.image -watch(props, (newImgUrl) => { - if(newImgUrl.image != ''){ - imageUrl.value = preUrl + newImgUrl.image - }else{ - imageUrl.value = '' - } -}, { immediate: true }) -</script> -<style lang="scss"> -.el-upload { - border: 1px dashed var(--el-border-color); - border-radius: 6px; - cursor: pointer; - position: relative; - overflow: hidden; - transition: var(--el-transition-duration-fast); - img { - width: 100px; - height: 100px; - } - .el-icon.uploader-icon { - font-size: 28px; - color: #8c939d; - width: 100px; - height: 100px; - text-align: center; - } - } - -</style> \ No newline at end of file diff --git a/src/components/UploadIcons/index.vue b/src/components/UploadIcons/index.vue deleted file mode 100644 index 11e4cef..0000000 --- a/src/components/UploadIcons/index.vue +++ /dev/null @@ -1,105 +0,0 @@ -<template> - <el-upload - v-model:file-list="fileList" - list-type="picture-card" - :on-preview="handlePictureCardPreview" - :on-remove="handleRemove" - :on-exceed="handleExceed" - :http-request="uploadImg" - :limit="props.limit" - :disabled="props.disabled" - > - <el-icon><Plus /></el-icon> - </el-upload> - - <el-dialog v-model="dialogVisible"> - <img w-full :src="dialogImageUrl" alt="Preview Image" /> - </el-dialog> -</template> - -<script setup> - import { ref } from 'vue' - import { Plus } from '@element-plus/icons-vue' - - import { ElMessage } from 'element-plus' - import { upload } from '@/api/basicApi/index' - - // import type { UploadProps } from 'element-plus' - import { getImage, setImage } from '@/utils/methods' - const props = defineProps({ - imageList: { - type: String, - default: '', - }, - limit: { - type: Number, - }, - disabled:{ - type: Boolean, - default:false, - }, - }) - const fileList = ref([]) - const file = ref([]) - - const emit = defineEmits(['uploadData']) - // const imageUrl = ref('') - - const dialogImageUrl = ref('') - const dialogVisible = ref(false) - - const handleRemove = (_, uploadFiles) => { - file.value = uploadFiles.map((item)=>{return item.url}) - emit('uploadData', file.value) - } - - const handlePictureCardPreview = (uploadFile) => { - dialogImageUrl.value = uploadFile.url - dialogVisible.value = true - } - //超出限制 - const handleExceed = () => { - ElMessage({ message: `只能上传${props.limit}张图片`, type: 'error' }) - } - //上传图片调用接口 - const uploadImg = async (params) => { - //建立表单,请求参数传表单形式 - let form = new FormData(); - form.append("file1", params.file); - form.append("fileId", params.file.lastModified); - form.append("path", 'revenue'); - //发出上传文件请求 - let res = await upload().uploadFile(form) - if(res.code == 200){ - //返回的图片网络地址传给form - ElMessage({ message: '上传图片成功', type: 'success' }) - file.value.push(res.data.newFileName) - emit('uploadData', setImage(file.value)) - } - } - //监听props.image - watch(props, (newvalue)=>{ - let newList = '' - if(newvalue.imageList!='' && newvalue.imageList != null){ - newList = getImage(newvalue.imageList).join(',') - } - if( newList != ''){ - //判断是否加上PREURL前缀 - if(file.value.join(',') != newList){ - let list = [] - newList.split(',').forEach((item)=>{ - list.push({ - url: item - }) - }) - fileList.value = list - console.log('回显',fileList.value) - - file.value = newList.split(',') - } - }else{ - fileList.value = [] //父组件image从有值到空变化,也要清空一遍组件中的值 - file.value = [] - } - },{immediate:true}) -</script> \ No newline at end of file diff --git a/src/main.js b/src/main.js index 9eb4825..4385060 100644 --- a/src/main.js +++ b/src/main.js @@ -37,27 +37,8 @@ // 分页组件 import Pagination from '@/components/Pagination' -// 自定义表格工具组件 -import RightToolbar from '@/components/RightToolbar' -// 富文本组件 -import Editor from "@/components/Editor" -// 文件上传组件 -import FileUpload from "@/components/FileUpload" -// 图片上传组件 -import ImageUpload from "@/components/ImageUpload" -// 图片预览组件 -import ImagePreview from "@/components/ImagePreview" // 自定义树选择组件 import TreeSelect from '@/components/TreeSelect' -// 字典标签组件 -import DictTag from '@/components/DictTag' -//Echarts图表 -import EchartsArea from '@/components/EchartsArea' - -//自定义文件上传 -import UploadFile from "@/components/UploadFile" -//多张图片上传 -import UploadIcons from "@/components/UploadIcons" //数据持久化 @@ -75,20 +56,11 @@ app.config.globalProperties.handleTree = handleTree app.config.globalProperties.addDateRange = addDateRange app.config.globalProperties.selectDictLabel = selectDictLabel -app.config.globalProperties.selectDictLabels = selectDictLabels +app.config.globalProperties.selectDictLabels = selectDictLabels // 全局组件挂载 -app.component('EchartsArea', EchartsArea) -app.component('DictTag', DictTag) app.component('Pagination', Pagination) app.component('TreeSelect', TreeSelect) -app.component('FileUpload', FileUpload) -app.component('UploadFile', UploadFile) -app.component('UploadIcons', UploadIcons) -app.component('ImageUpload', ImageUpload) -app.component('ImagePreview', ImagePreview) -app.component('RightToolbar', RightToolbar) -app.component('Editor', Editor) import { addActiveRoute } from '@/utils/index' diff --git a/src/router/index.js b/src/router/index.js index 59923af..7fc95f4 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -8,8 +8,9 @@ */ import { createWebHashHistory, createRouter } from 'vue-router' /* Layout */ -import Layout from '@/layout' import Screen from '@/screen' +import Flow from '@/screen/flow.vue' +import Temp from '@/screen/temp.vue' /** * Note: 路由配置项 @@ -33,82 +34,14 @@ // 公共路由 export const constantRoutes = [ { - path: '/redirect', - component: Layout, - hidden: true, - children: [ - { - path: '/redirect/:path(.*)', - component: () => import('@/views/redirect/index.vue') - } - ] - }, - { path: '/', - component: Layout, - redirect: '/user', - children: [ - { - path: '/userCenter', - component: () => import('@/views/userCenter.vue'), - name: 'userCenter', - meta: { title: '个人中心', icon: 'PhUserCircleFill', affix: true } - }, - ] + hidden: true, + redirect: '/user' }, { path: '/login', component: () => import('@/views/login'), hidden: true - }, - { - path: '/screen', - component: Screen, - redirect: '/overview', - children: [ - { - path: '/overview', - component: () => import('@/views/screen/overView/index'), - name: 'overview', - meta: { title: '总览'} - }, - { - path: '/irrigate', - component: () => import('@/views/screen/irrigate/index'), - name: 'irrigate', - meta: { title: '智慧灌溉'} - }, - { - path: '/revenue', - component: () => import('@/views/screen/revenue/index'), - name: 'revenue', - meta: { title: '营收管理'} - }, - { - path: '/facility-screen', - component: () => import('@/views/screen/facility/index'), - name: 'facility', - meta: { title: '设备管理'} - }, - { - path: '/statistics', - component: () => import('@/views/screen/statistics/index'), - name: 'statistics', - meta: { title: '统计分析'} - }, - { - path: '/alarm-screen', - component: () => import('@/views/screen/alarm/index'), - name: 'alarm', - meta: { title: '报警管理'} - }, - { - path: '/reports', - component: () => import('@/views/screen/reports/index'), - name: 'pump', - meta: { title: '泵站控制'} - }, - ] }, { path: "/:pathMatch(.*)*", @@ -120,6 +53,41 @@ component: () => import('@/views/error/401'), hidden: true }, + { + path: '/screen', + component: Screen, + hidden: true + } +] + +// 流量大屏路由 +const FlowScreenRouter = [ + { + path: '/flow', + component: Flow, + redirect: '/flow/home', + children: [ + { + path: 'home', + component: () => import('@/views/screen/flow/home/index.vue') + } + ] + }, +] + +// 温度大屏路由 +const TempScreenRouter = [ + { + path: '/temp', + component: Temp, + redirect: '/temp/home', + children: [ + { + path: 'home', + component: () => import('@/views/screen/temperature/home/index.vue') + } + ] + } ] // 动态路由,基于用户权限动态去加载 @@ -128,7 +96,7 @@ const router = createRouter({ history: createWebHashHistory(), - routes: constantRoutes, + routes: [...constantRoutes, ...FlowScreenRouter, ...TempScreenRouter], scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition diff --git a/src/screen/flow.vue b/src/screen/flow.vue new file mode 100644 index 0000000..e543a76 --- /dev/null +++ b/src/screen/flow.vue @@ -0,0 +1,75 @@ +<template> + <div class="main"> + <div class="header"> + <div class="top">金川水电站生态流量监测系统 </div> + <div class="nav"> + <div v-for="(item,index) in btnList" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div> + </div> + </div> + <div class="content"> + <router-view></router-view> + </div> + </div> +</template> +<script setup> +import{ useRouter,useRoute } from 'vue-router' + +const router = useRouter() +const route = ref(useRoute()) +const btnList = ref([ + {name:'总览',url:'/flow/home'}, + {name:'生态流量',url:''}, + {name:'图像监测', url:''}, + {name:'设备管理',url:''}, + {name:'报警管理',url:''}, + {name:'报表管理',url:''}, + {name:'系统管理',url:'/user'}, +]) +const navTo = (item) =>{ + router.push(item.url) +} + +</script> + +<style lang="scss" scoped> +.main{ + width: 100%; + height: 100%; + .header{ + width: 100%; + height: 14%; + .top{ + height: 60%; + display: flex; + align-items: center; + justify-content: center; + font-size: 38px; + font-weight: 700; + color: #fff; + } + .nav{ + display: flex; + height: 40%; + .plain{ + flex-grow: 1; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #fff; + background-color: rgba(23, 108, 229, 0.3); + color: #fff; + font-size: 22px; + cursor: pointer; + } + .active{ + background-color: #91BDDB; + } + } + } + .content{ + width: 100%; + height: 86%; + } +} +</style> \ No newline at end of file diff --git a/src/screen/index.vue b/src/screen/index.vue index 2efbc49..5c5eb42 100644 --- a/src/screen/index.vue +++ b/src/screen/index.vue @@ -1,217 +1,36 @@ <template> - <div class="main"> - <div class="header"> - <div class="top"> - <div class="title">金川水电站生态流量监测系统</div> - <div class="time"> - <span>{{ nowTime.date }}</span> - <span>{{ nowTime.time }}</span> - </div> - <div class="user-image"> - <div> - <img src="../assets/images/screen/userImg.png" alt=""> - </div> - <div class="loginOut"> - <el-dropdown trigger="click"> - <img src="../assets/images/screen/loginOut.png" alt=""> - <template #dropdown> - <el-dropdown-menu> - <el-dropdown-item> - <span @click="toUserDetail" >个人中心</span> - </el-dropdown-item> - <el-dropdown-item divided> - <span @click="loginOut">退出登录</span> - </el-dropdown-item> - </el-dropdown-menu> - </template> - </el-dropdown> - </div> - </div> - <div class="left-icon"><img src="../assets/images/screen/head-left.png" alt=""></div> - <div class="right-icon"><img src="../assets/images/screen/head-left.png" alt=""></div> - </div> - <div class="nav"> - <div class="nav-content"> - <div v-for="(item,index) in btnList" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div> - </div> - </div> + <div class="container"> + <div class="list"> + <router-link to="/temp" class="item">水温监测系统</router-link> + <router-link to="/flow" class="item">流量监测系统</router-link> </div> - <div class="content"><router-view></router-view></div> </div> </template> + <script setup> -import{ useRouter,useRoute } from 'vue-router' -import {ElMessageBox} from "element-plus"; -import { removeToken } from '@/utils/auth' - -const router = useRouter() -const route = ref(useRoute()) -const loginOut = () =>{ - ElMessageBox.confirm('确定注销并退出系统吗?', '提示', { - confirmButtonText: '确定', - cancelButtonText: '取消', - type: 'warning' - }).then((e) => { - removeToken() - window.location.reload(); - - }).catch(() => { }); -} -const toUserDetail = () =>{ - router.push('/userCenter') -} -const btnList = ref([ - {name:'总览',url:'/overview'}, - {name:'生态流量',url:'/irrigate'}, - {name:'图像监测', url:'/dma'}, - {name:'设备管理',url:'/facility-screen'}, - {name:'报警管理',url:'/alarm-screen'}, - {name:'报表管理',url:'/reports'}, - {name:'系统管理',url:'/user'}, -]) -const navTo = (item) =>{ - router.push(item.url) -} -//获取当前时间 -const nowTime = ref({}) -const now = new Date() -const getTime = (now) => { - // 获取年月日时分秒 - const year = now.getFullYear(); - const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的 - const day = String(now.getDate()).padStart(2, '0'); - const hours = String(now.getHours()).padStart(2, '0'); - const minutes = String(now.getMinutes()).padStart(2, '0'); - const seconds = String(now.getSeconds()).padStart(2, '0'); - - // 获取星期 - const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; - const weekday = weekdays[now.getDay()]; - - // 拼接成指定格式的字符串 - return nowTime.value = { - date:`${year}.${month}.${day} ${weekday}`, - time:`${hours}:${minutes}:${seconds}`, - } -} -getTime(now) -onMounted(()=>{ - setInterval(()=>{ - nowTime.value = getTime(new Date()) - },1000) -}) </script> -<style lang="scss" scoped> -.main{ - background-image:url("../assets/images/screen/bcg.png"); - background-size: 100% 100%; +<style scoped lang="scss"> +.container{ width: 100%; height: 100%; - .header{ - width: 100%; - height: 14%; - .top{ - position: relative; - width: 100%; - height: 82px; - background-image: url("../assets/images/screen/head.png"); - background-size: 100% 100%; - .title{ - width: 916px; - height: 39px; - position: absolute; - left:calc(50% - 458px); - text-align: center; - font-weight: normal; - font-size: 36px; - color: #F9FBFF; - line-height: 70px; - letter-spacing: 9px; - text-shadow:0 0 3px rgba(255,255,255,0.7); - } - .time{ - position: absolute; - width: 200px; - top:5px; - left:26px; - display: flex; - justify-content: space-between; - line-height: 23px; - span{ - font-weight: 400; - font-size: 16px; - color: #83D9F3; - } - span:last-child{ - text-shadow:0 0 2px rgba(255,255,255,0.6); - } - } - .user-image{ - position: absolute; - width: 55px; - height:30px; - top:5px; - right:26px; - display: flex; - justify-content: space-between; - align-items: center; - .loginOut img{ - margin-top: 4px; - width:14px; - height:8px; - } - } - .left-icon{ - position: absolute; - top: 50%; - img{ - width: 452px; - height: 30px; - } - } - .right-icon{ - position: absolute; - top: 50%; - right: 0; - img{ - width: 459px; - height: 30px; - transform: scaleX(-1); - } - } - } - .nav{ - width: 100%; - display: flex; - justify-content: center; - align-items: center; - } - .nav-content{ - width: 1758px; - height: 50px; - display: flex; - align-items: center; - justify-content: space-between; - font-weight: 400; - font-size: 17px; - color: #FFFFFF; - line-height: 50px; - .plain{ - width: 181px; - height: 50px; - background-image: url("../assets/images/screen/btnbg.png"); - text-align: center; - } - .active{ - background-image: url("../assets/images/screen/btnbg-active.png"); - } - } + padding: 100px; + .list{ + display: flex; + align-items: center; + gap: 30px; } - .content{ - width: 100%; - height: 86%; + .item{ + width: 300px; + height: 150px; + text-align: center; + line-height: 150px; + font-size: 28px; + color: #fff; + background-color: #1ab394; + box-shadow: 0 0 10px #1ab394; + border-radius: 10px; } } </style> \ No newline at end of file diff --git a/src/screen/temp.vue b/src/screen/temp.vue new file mode 100644 index 0000000..1613cc7 --- /dev/null +++ b/src/screen/temp.vue @@ -0,0 +1,75 @@ +<template> + <div class="main"> + <div class="header"> + <div class="top">金川水电站生态流量监测系统 </div> + <div class="nav"> + <div v-for="(item,index) in btnList" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div> + </div> + </div> + <div class="content"> + <router-view></router-view> + </div> + </div> +</template> +<script setup> +import{ useRouter,useRoute } from 'vue-router' + +const router = useRouter() +const route = ref(useRoute()) +const btnList = ref([ + {name:'总览',url:'/temp/home'}, + {name:'设备管理',url:''}, + {name:'实时监测', url:''}, + {name:'图形分析',url:''}, + {name:'汇总统计',url:''}, + {name:'报表管理',url:''}, + {name:'系统管理',url:'/user'}, +]) +const navTo = (item) =>{ + router.push(item.url) +} + +</script> + +<style lang="scss" scoped> +.main{ + width: 100%; + height: 100%; + .header{ + width: 100%; + height: 14%; + .top{ + height: 60%; + display: flex; + align-items: center; + justify-content: center; + font-size: 38px; + font-weight: 700; + color: #fff; + } + .nav{ + display: flex; + height: 40%; + .plain{ + flex-grow: 1; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #fff; + background-color: rgba(23, 108, 229, 0.3); + color: #fff; + font-size: 22px; + cursor: pointer; + } + .active{ + background-color: #91BDDB; + } + } + } + .content{ + width: 100%; + height: 86%; + } +} +</style> \ No newline at end of file diff --git a/src/settings.js b/src/settings.js index 08a0108..10e1db4 100644 --- a/src/settings.js +++ b/src/settings.js @@ -10,7 +10,7 @@ /** * 是否系统布局配置 */ - showSettings: true, + showSettings: false, /** * 是否显示顶部导航 diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 5a78c97..65f067f 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -24,12 +24,8 @@ actions: { // 登录 login(userInfo) { - const userName = userInfo.userName.trim() - const password = userInfo.password - // const code = userInfo.code - // const uuid = userInfo.uuid return new Promise((resolve, reject) => { - login(userName, password).then(res => { + login(userInfo).then(res => { setToken(res.data.token) this.token = res.token diff --git a/src/views/alarm/alarmDefinition/index.vue b/src/views/alarm/alarmDefinition/index.vue index 72e4937..adfa206 100644 --- a/src/views/alarm/alarmDefinition/index.vue +++ b/src/views/alarm/alarmDefinition/index.vue @@ -76,7 +76,7 @@ <script setup name="Menu"> import alarmDefinition from "@/api/configuration/alarmDefinition/index.js"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/alarm/alarmHistory/index.vue b/src/views/alarm/alarmHistory/index.vue index 097c056..85d45f6 100644 --- a/src/views/alarm/alarmHistory/index.vue +++ b/src/views/alarm/alarmHistory/index.vue @@ -9,7 +9,7 @@ <script setup> import alarmHistoryApi from "@/api/alarmApi/alarmHistory"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/alarm/alarmScheme/index.vue b/src/views/alarm/alarmScheme/index.vue index 35a0d62..ae6f792 100644 --- a/src/views/alarm/alarmScheme/index.vue +++ b/src/views/alarm/alarmScheme/index.vue @@ -15,7 +15,7 @@ import user from "@/api/system/user.js"; import waterMeterApi from "@/api/waterMeterApi/index.js"; import {sysDictData} from "@/api/system/dict.js"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; import{ useRoute } from 'vue-router' const {proxy} = getCurrentInstance(); @@ -86,13 +86,13 @@ const getFacilityList = async () => { - await facilityApi().search({limit: 10000, page: 1}).then((res) => { + await facilityApi().search({limit: 100, page: 1}).then((res) => { console.log("设备列表" + res.data.list); facilityList.value = res.data.list }) } const getInformUserList = async () => { - await user().search({limit: 10000, page: 1}).then((res) => { + await user().search({limit: 100, page: 1}).then((res) => { console.log("通知人员列表" + res.data.list); informUserList.value = res.data.list }) diff --git a/src/views/configuration/commonParameters/index.vue b/src/views/configuration/commonParameters/index.vue index 88f2b4c..b355ad5 100644 --- a/src/views/configuration/commonParameters/index.vue +++ b/src/views/configuration/commonParameters/index.vue @@ -76,7 +76,7 @@ <script setup name="Menu"> import commonParameters from "@/api/configuration/commonParameters/index.js"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/configuration/companySetting/index.vue b/src/views/configuration/companySetting/index.vue index a559ba4..9f8ef1d 100644 --- a/src/views/configuration/companySetting/index.vue +++ b/src/views/configuration/companySetting/index.vue @@ -100,7 +100,7 @@ <script setup name="Menu"> import companySetting from "@/api/configuration/companySetting"; import { sysDictData } from "@/api/system/dict"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/configuration/defaultAmountSetting/index.vue b/src/views/configuration/defaultAmountSetting/index.vue index ae31625..f3930d8 100644 --- a/src/views/configuration/defaultAmountSetting/index.vue +++ b/src/views/configuration/defaultAmountSetting/index.vue @@ -86,7 +86,7 @@ <script setup name="Menu"> import defaultAmountSetting from "@/api/configuration/defaultAmountSetting"; import userClassify from "@/api/configuration/userClassify"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/configuration/invoiceTitle/index.vue b/src/views/configuration/invoiceTitle/index.vue index d2074e0..e6dd7f0 100644 --- a/src/views/configuration/invoiceTitle/index.vue +++ b/src/views/configuration/invoiceTitle/index.vue @@ -3,7 +3,7 @@ import invoiceTitle from "@/api/configuration/invoiceTitle"; import { sysDictData } from "@/api/system/dict"; import user from "@/api/system/user"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/configuration/salePlace/index.vue b/src/views/configuration/salePlace/index.vue index a200bdb..47763c5 100644 --- a/src/views/configuration/salePlace/index.vue +++ b/src/views/configuration/salePlace/index.vue @@ -136,7 +136,7 @@ import { region } from "@/api/basicApi"; import user from "@/api/system/user"; import { PREURL } from "@/config/index"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/configuration/userClassify/index.vue b/src/views/configuration/userClassify/index.vue index 9598191..ef361dc 100644 --- a/src/views/configuration/userClassify/index.vue +++ b/src/views/configuration/userClassify/index.vue @@ -78,7 +78,7 @@ <script setup name="Menu"> import userClassify from "@/api/configuration/userClassify"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/configuration/waterOtherFee/index.vue b/src/views/configuration/waterOtherFee/index.vue index f6e8e77..8ffcf08 100644 --- a/src/views/configuration/waterOtherFee/index.vue +++ b/src/views/configuration/waterOtherFee/index.vue @@ -92,7 +92,7 @@ <script setup name="Menu"> import waterOtherFee from "@/api/configuration/waterOtherFee"; import userClassify from "@/api/configuration/userClassify"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/configuration/waterPrice/index.vue b/src/views/configuration/waterPrice/index.vue index 4a68594..606a45a 100644 --- a/src/views/configuration/waterPrice/index.vue +++ b/src/views/configuration/waterPrice/index.vue @@ -114,7 +114,7 @@ <script setup name="Menu"> import TieredCharging from "@/api/configuration/waterPrice"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/customer/archives/index.vue b/src/views/customer/archives/index.vue index 09a2171..c6008b8 100644 --- a/src/views/customer/archives/index.vue +++ b/src/views/customer/archives/index.vue @@ -10,7 +10,7 @@ <script setup> import archivesApi from "@/api/archivesApi/index"; import {areaApi} from "@/api/area/index"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/error/404.vue b/src/views/error/404.vue index f205303..d10d8b5 100644 --- a/src/views/error/404.vue +++ b/src/views/error/404.vue @@ -17,7 +17,7 @@ <div class="bullshit__info"> 对不起,您正在寻找的页面不存在。尝试检查URL的错误,然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。 </div> - <router-link to="/index" class="bullshit__return-home"> + <router-link to="/" class="bullshit__return-home"> 返回首页 </router-link> </div> diff --git a/src/views/facility/area/index.vue b/src/views/facility/area/index.vue index 8cf1080..19243f9 100644 --- a/src/views/facility/area/index.vue +++ b/src/views/facility/area/index.vue @@ -4,7 +4,7 @@ import {region} from "@/api/basicApi/index.js"; import { onMounted } from "vue"; import user from "@/api/system/user.js"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); const loading = ref(true); //加载状态 @@ -146,7 +146,7 @@ const getUserList = async() =>{ loading.value = true; - let res = await user().search({limit:1000,page:1}) + let res = await user().search({limit:100,page:1}) if(res.code == 200) { loading.value = false; areaUserList.value = res.data.list diff --git a/src/views/facility/collector/index.vue b/src/views/facility/collector/index.vue index 2793cc5..0e70c9b 100644 --- a/src/views/facility/collector/index.vue +++ b/src/views/facility/collector/index.vue @@ -10,7 +10,7 @@ <script setup> import collectorApi from "@/api/facility/collector"; import { nameReg ,phoneReg } from "@/utils/regular"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); diff --git a/src/views/facility/facilityList/index.vue b/src/views/facility/facilityList/index.vue index d895f39..7f7ab47 100644 --- a/src/views/facility/facilityList/index.vue +++ b/src/views/facility/facilityList/index.vue @@ -6,7 +6,7 @@ import commonParameters from "@/api/configuration/commonParameters/index.js"; import waterFacilityParameter from "@/api/configuration/facilityParameter/index.js"; import {PREURL} from '@/config/index' -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; const route = useRoute(); const preUrl = ref(PREURL); const {proxy} = getCurrentInstance(); diff --git a/src/views/facility/facilityParameter/index.vue b/src/views/facility/facilityParameter/index.vue index 719359a..f737600 100644 --- a/src/views/facility/facilityParameter/index.vue +++ b/src/views/facility/facilityParameter/index.vue @@ -70,7 +70,7 @@ <script setup name="Menu"> import waterFacilityParameter from "@/api/configuration/facilityParameter/index.js"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/facility/facilityType/index.vue b/src/views/facility/facilityType/index.vue index d777375..3131f0d 100644 --- a/src/views/facility/facilityType/index.vue +++ b/src/views/facility/facilityType/index.vue @@ -8,7 +8,7 @@ --> <script setup> import facilityTypeApi from "@/api/facility/facilityType"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; const route = useRoute(); const { proxy } = getCurrentInstance(); diff --git a/src/views/facility/handleRecord/index.vue b/src/views/facility/handleRecord/index.vue index 3572414..ec21fba 100644 --- a/src/views/facility/handleRecord/index.vue +++ b/src/views/facility/handleRecord/index.vue @@ -8,7 +8,7 @@ --> <script setup> import recordApi from "@/api/facility/record.js"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/facility/supplier/index.vue b/src/views/facility/supplier/index.vue index 3694966..848b71b 100644 --- a/src/views/facility/supplier/index.vue +++ b/src/views/facility/supplier/index.vue @@ -10,7 +10,7 @@ <script setup> import supplierApi from "@/api/waterMeterApi/supplier"; import { nameReg ,phoneReg } from "@/utils/regular"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); diff --git a/src/views/facility/valveDevice/index.vue b/src/views/facility/valveDevice/index.vue index 19f1043..cc46c63 100644 --- a/src/views/facility/valveDevice/index.vue +++ b/src/views/facility/valveDevice/index.vue @@ -14,7 +14,7 @@ import commonParameters from "@/api/configuration/commonParameters/index.js"; import waterFacilityParameter from "@/api/configuration/facilityParameter/index.js"; import {PREURL} from '@/config/index' -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; const route = useRoute(); const preUrl = ref(PREURL); const {proxy} = getCurrentInstance(); @@ -103,7 +103,7 @@ //查询监控点 const areaList = ref(); const getArea = async () => { - await areaApi().search({limit: 10000, page: 1}).then((res) => { + await areaApi().search({limit: 100, page: 1}).then((res) => { areaList.value = res.data.list }) } @@ -111,7 +111,7 @@ //查询供应商 const supplierList = ref(); const getSupplier = async () => { - await supplierApi().search({limit: 10000, page: 1}).then((res) => { + await supplierApi().search({limit: 100, page: 1}).then((res) => { console.log("供应商" + res.data.list); supplierList.value = res.data.list }) diff --git a/src/views/facilityExamine/facilityExaminePlan/index.vue b/src/views/facilityExamine/facilityExaminePlan/index.vue index 57c6d6f..69fa660 100644 --- a/src/views/facilityExamine/facilityExaminePlan/index.vue +++ b/src/views/facilityExamine/facilityExaminePlan/index.vue @@ -1,7 +1,7 @@ <script setup name="Post"> import { facilityExaminePlanApi } from "@/api/examine/plan/index.js"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; import user from "@/api/system/user"; import {sysDictData} from "../../../api/system/dict.js"; import facilityApi from "../../../api/facility/index.js"; diff --git a/src/views/facilityExamine/facilityExamineRecord/index.vue b/src/views/facilityExamine/facilityExamineRecord/index.vue index 98824cd..ee7a8ba 100644 --- a/src/views/facilityExamine/facilityExamineRecord/index.vue +++ b/src/views/facilityExamine/facilityExamineRecord/index.vue @@ -1,6 +1,6 @@ <script setup name="Post"> import {facilityExamineRecordApi} from "@/api/examine/record/index.js"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; import facilityApi from "@/api/facility/index.js"; const {proxy} = getCurrentInstance(); /** diff --git a/src/views/facilityMaintain/facilityMaintainRecord/index.vue b/src/views/facilityMaintain/facilityMaintainRecord/index.vue index a288ea7..fa497d1 100644 --- a/src/views/facilityMaintain/facilityMaintainRecord/index.vue +++ b/src/views/facilityMaintain/facilityMaintainRecord/index.vue @@ -1,6 +1,6 @@ <script setup > import {facilityMaintainRecordApi} from "@/api/maintain/record/index.js"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; const {proxy} = getCurrentInstance(); /** diff --git a/src/views/financial/billRecord/index.vue b/src/views/financial/billRecord/index.vue index 2e0681d..22f5a28 100644 --- a/src/views/financial/billRecord/index.vue +++ b/src/views/financial/billRecord/index.vue @@ -4,7 +4,7 @@ import TieredCharging from "@/api/configuration/waterPrice"; const { proxy } = getCurrentInstance(); import archivesApi from "@/api/archivesApi/index"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; /** * 搜索相关 diff --git a/src/views/financial/invoice/index.vue b/src/views/financial/invoice/index.vue index 034bcac..3a3234e 100644 --- a/src/views/financial/invoice/index.vue +++ b/src/views/financial/invoice/index.vue @@ -3,7 +3,7 @@ import invoice from "@/api/financial/invoice"; import { sysDictData } from "@/api/system/dict"; import user from "@/api/system/user"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/financial/payRecord/index.vue b/src/views/financial/payRecord/index.vue index 2383610..22a5790 100644 --- a/src/views/financial/payRecord/index.vue +++ b/src/views/financial/payRecord/index.vue @@ -1,7 +1,7 @@ <script setup > import payRecord from "@/api/financial/payRecord"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/financial/payable/index.vue b/src/views/financial/payable/index.vue index e24542a..285f57a 100644 --- a/src/views/financial/payable/index.vue +++ b/src/views/financial/payable/index.vue @@ -1,7 +1,7 @@ <script setup > import payable from "@/api/financial/payable"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/financial/recharge/index.vue b/src/views/financial/recharge/index.vue index d6abbc7..c4c93f1 100644 --- a/src/views/financial/recharge/index.vue +++ b/src/views/financial/recharge/index.vue @@ -3,7 +3,7 @@ import recharge from "@/api/financial/recharge"; import archivesApi from "@/api/archivesApi"; import { sysDictData} from "@/api/system/dict"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/financial/tradeRecord/index.vue b/src/views/financial/tradeRecord/index.vue index e5fd14d..aebeaa4 100644 --- a/src/views/financial/tradeRecord/index.vue +++ b/src/views/financial/tradeRecord/index.vue @@ -1,7 +1,7 @@ <script setup > import payable from "@/api/financial/payable"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; import tradeRecord from "../../../api/financial/tradeRecord/index.js"; const { proxy } = getCurrentInstance(); diff --git a/src/views/financial/userBankAccount/index.vue b/src/views/financial/userBankAccount/index.vue index a693754..ac755f3 100644 --- a/src/views/financial/userBankAccount/index.vue +++ b/src/views/financial/userBankAccount/index.vue @@ -2,7 +2,7 @@ <script setup > import userBankAccount from "@/api/financial/userBankAccount"; import user from "@/api/system/user"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/financial/userCapitalChange/index.vue b/src/views/financial/userCapitalChange/index.vue index 8205e59..1e51c2e 100644 --- a/src/views/financial/userCapitalChange/index.vue +++ b/src/views/financial/userCapitalChange/index.vue @@ -1,7 +1,7 @@ <script setup > import userCapitalChange from "@/api/financial/userCapitalChange"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** * 搜索相关 diff --git a/src/views/financial/waterMeterTask/index.vue b/src/views/financial/waterMeterTask/index.vue index 77ee801..57dec3f 100644 --- a/src/views/financial/waterMeterTask/index.vue +++ b/src/views/financial/waterMeterTask/index.vue @@ -4,7 +4,7 @@ import TieredCharging from "@/api/configuration/waterPrice"; const { proxy } = getCurrentInstance(); import archivesApi from "@/api/archivesApi/index"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; import waterMeterTask from "@/api/financial/waterMeterTask/index.js"; /** diff --git a/src/views/login.vue b/src/views/login.vue index a590622..b2d1e8a 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -1,277 +1,371 @@ <template> - <div class="login"> - <div class="login-bcg1"></div> - <div class="contain"> - <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> - <h3 class="title">金川水电站生态流量监测系统</h3> - <el-form-item label="账 号" prop="userName"> - <el-input - style="height: 45px;" - v-model="loginForm.userName" - type="text" - auto-complete="off" - placeholder="账号" - > - <!-- <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> --> - </el-input> - </el-form-item> - <el-form-item label="密 码" prop="password"> - <el-input - style="height: 45px;" - v-model="loginForm.password" - :type="isPassword" - size="large" - auto-complete="off" - placeholder="密码" - @keyup.enter="handleLogin" - > - <template #suffix> - <div @click="showPassword"><svg-icon :icon-class="eyeView"/></div> - </template> - </el-input> - </el-form-item> - <el-checkbox class="check-box" v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> - <el-form-item > - <el-button - :loading="loading" - size="large" - type="primary" - style="width:100%;" - @click.prevent="handleLogin" - > - <span v-if="!loading">登 录</span> - <span v-else>登 录 中...</span> - </el-button> - </el-form-item> - </el-form> - <img src="../assets/images/login/login_icon.png"/> + <div class="login"> + <div class="login-bcg1"></div> + <div class="contain"> + <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form" + @keydown.enter="handleLogin"> + <h3 class="title">金川水电站生态流量监测系统</h3> + <el-form-item label="账号" prop="userName"> + <el-input + style="height: 45px;" + v-model="loginForm.userName" + type="text" + auto-complete="off" + placeholder="账号" + > + <!-- <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> --> + </el-input> + </el-form-item> + <el-form-item label="密码" prop="password"> + <el-input + style="height: 45px;" + v-model="loginForm.password" + :type="isPassword" + size="large" + auto-complete="off" + placeholder="密码" + > + <template #suffix> + <div @click="showPassword"> + <svg-icon :icon-class="eyeView"/> + </div> + </template> + </el-input> + </el-form-item> + <el-form-item label="验证码" prop="code"> + <div class="yzm-box"> + <el-input + style="height: 45px;" + v-model="loginForm.code" + size="large" + auto-complete="off" + placeholder="验证码" + > + </el-input> + <div class="yzm" @click="resetCode"> + <img v-if="codeUrl" :src="codeUrl" alt=""/> + <div v-else class="code-none">无法加载</div> + </div> + </div> + </el-form-item> + <el-checkbox class="check-box" v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;"> + 记住密码 + </el-checkbox> + <el-form-item> + <el-button + :loading="loading" + size="large" + type="primary" + style="width:100%;" + @click.prevent="handleLogin" + > + <span v-if="!loading">登 录</span> + <span v-else>登 录 中...</span> + </el-button> + </el-form-item> + </el-form> + <img class="left-img" src="../assets/images/login/login_icon.png"/> + </div> + <!-- 底部 --> + <div class="footer"> + <span>苏州伦晗电子有限公司.</span> + </div> </div> - <!-- 底部 --> - <div class="footer"> - <span>苏州伦晗电子有限公司.</span> - </div> - </div> </template> <script setup> -// import { getCodeImg } from "@/api/login"; +import {onMounted} from 'vue'; import Cookies from "js-cookie"; -import { encrypt, decrypt } from "@/utils/jsencrypt"; +import {encrypt, decrypt} from "@/utils/jsencrypt"; import useUserStore from '@/store/modules/user'; import usePermissionStore from '@/store/modules/permission'; -import { addActiveRoute } from '@/utils/index'; -import { setToken } from '@/utils/auth'; -import { useRouter, useRoute } from 'vue-router'; -import { login } from '@/api/login'; +import {addActiveRoute} from '@/utils/index'; +import {setToken} from '@/utils/auth'; +import {useRouter, useRoute} from 'vue-router'; +import {login, register, getIp} from '@/api/login'; + const userStore = useUserStore() const permissionStore = usePermissionStore() const route = useRoute(); const router = useRouter(); -const { proxy } = getCurrentInstance(); +const {proxy} = getCurrentInstance(); const isPassword = ref('password'); const eyeView = ref('eye') -const showPassword = () =>{ - if(eyeView.value === 'eye'){ +const showPassword = () => { + if (eyeView.value === 'eye') { eyeView.value = 'eye-open' isPassword.value = 'text' - }else if(eyeView.value === 'eye-open'){ + } else if (eyeView.value === 'eye-open') { eyeView.value = 'eye' isPassword.value = 'password' } } -const loginForm = ref({ - userName: "", - password: "", - rememberMe: false +const loginForm = reactive({ + userName: "", + password: "", + code: '', + uuid: '', + machineCode: '', + rememberMe: false }); +const codeUrl = ref(''); const loginRules = { - userName: [{ required: true, trigger: "blur", message: "请输入您的账号" }], - password: [{ required: true, trigger: "blur", message: "请输入您的密码" }], + userName: [{required: true, trigger: "blur", message: "请输入您的账号"}], + password: [{required: true, trigger: "blur", message: "请输入您的密码"}], + code: [{required: true, trigger: "blur", message: "请输入您的验证码"}], }; const loading = ref(false); const redirect = ref(undefined); watch(route, (newRoute) => { redirect.value = newRoute.query && newRoute.query.redirect; -}, { immediate: true }); +}, {immediate: true}); + +/** + * 生成随机字符串uuid + * @param length 字符串的长度,默认11 + * @returns {string} + */ +function generateRandomString(length = 11) { + let charset = 'abcdefghijklmnopqrstuvwxyz-_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; + let values = new Uint32Array(length); + window.crypto.getRandomValues(values); + let str = ''; + for (let i = 0; i < length; i++) { + str += charset[values[i] % charset.length]; + } + return str; +} + +/** + * 获取验证码 + */ +async function resetCode() { + loginForm.uuid = generateRandomString(11); + register(loginForm.uuid).then(res => { + codeUrl.value = res.data + }) +} + +/** + * 获取电脑标识 + */ +async function getConputerId() { + const res = await getIp(); + loginForm.machineCode = res.data; +} //根据moduleCode获取相对应菜单 const filterTreeMenus = (menus, userType) => { - let filteredMenu = []; - for (let item of menus) { + let filteredMenu = []; + for (let item of menus) { filteredMenu.push(item); - if (item.children && item.children.length > 0) { - let filteredChildren = filterTreeMenus(item.children, userType); - if (filteredChildren.length > 0) { - item.children = filteredChildren; - } else { - delete item.children; - } - } - } - return filteredMenu; + if (item.children && item.children.length > 0) { + let filteredChildren = filterTreeMenus(item.children, userType); + if (filteredChildren.length > 0) { + item.children = filteredChildren; + } else { + delete item.children; + } + } + } + return filteredMenu; } function handleLogin() { - proxy.$refs.loginRef.validate(valid => { - if (valid) { - loading.value = true; + proxy.$refs.loginRef.validate(valid => { + if (valid) { + loading.value = true; - //记住密码 - if (loginForm.value.rememberMe) { - Cookies.set("userName", loginForm.value.userName, { expires: 30 }); - Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 }); - Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 }); - } else { - //移除 - Cookies.remove("userName"); - Cookies.remove("password"); - Cookies.remove("rememberMe"); - } - const userInfo = { - userName:loginForm.value.userName.trim(), - password: loginForm.value.password - } - login(userInfo).then(async(res) => { - loading.value = false; - setToken(res.data.token) - - //普通管理员筛除菜单、权限、数据字典,普通用户筛除系统管理 - if(res.data.userType == 2){ - res.data.menus.forEach((item,index) =>{ - if(item.id == '10001'){ - item.children.forEach((itemChild,childIndex) =>{ - if(itemChild.id == '10101' || itemChild.id == '10102' || itemChild.id == '1822894922704416770'){ - item.children.splice(childIndex,1) - } - }) - } + //记住密码 + if (loginForm.rememberMe) { + Cookies.set("userName", loginForm.userName, {expires: 30}); + Cookies.set("password", encrypt(loginForm.password), {expires: 30}); + Cookies.set("rememberMe", loginForm.rememberMe, {expires: 30}); + } else { + //移除 + Cookies.remove("userName"); + Cookies.remove("password"); + Cookies.remove("rememberMe"); + } + const userInfo = { + userName: loginForm.userName.trim(), + password: loginForm.password, + code: loginForm.code, + uuid: loginForm.uuid, + machineCode: loginForm.machineCode, + } + login(userInfo).then(async (res) => { + loading.value = false; + setToken(res.data.token) + + //普通管理员筛除菜单、权限、数据字典,普通用户筛除系统管理 + if (res.data.userType == 2) { + res.data.menus.forEach((item, index) => { + if (item.id == '10001') { + item.children.forEach((itemChild, childIndex) => { + if (itemChild.id == '10101' || itemChild.id == '10102' || itemChild.id == '1822894922704416770') { + item.children.splice(childIndex, 1) + } + }) + } + }) + } else if (res.data.userType == 3) { + res.data.menus.forEach((item, index) => { + if (item.id == '10001') { + res.data.menus.splice(index, 1) + } + }) + } + console.log(123123, res.data.menus) + let filteredMenus = filterTreeMenus(res.data.menus, 1) + console.log('filterTreeMenus菜单权限过滤', filteredMenus) + + permissionStore.setSidebarRouters(filteredMenus); + console.log('setSidebarRouters配置菜单路由项数据', permissionStore.sidebarRouters) + + addActiveRoute(permissionStore, router) + + localStorage.setItem('listPermission', JSON.stringify(res.data.listPermission)) + localStorage.setItem('id', JSON.stringify(res.data.id)) + localStorage.setItem('userType', JSON.stringify(res.data.userType)) + + router.push("/screen");//overview + }).catch(error => { + loading.value = false; + proxy.$modal.msgError('登录失败!') }) - }else if(res.data.userType == 3){ - res.data.menus.forEach((item,index) =>{ - if(item.id == '10001'){ - res.data.menus.splice(index,1) - } - }) - } - console.log(123123,res.data.menus) - let filteredMenus = filterTreeMenus(res.data.menus, 1) - console.log('filterTreeMenus菜单权限过滤',filteredMenus) - - permissionStore.setSidebarRouters(filteredMenus); - console.log('setSidebarRouters配置菜单路由项数据', permissionStore.sidebarRouters) - - addActiveRoute(permissionStore, router) - - localStorage.setItem('listPermission',JSON.stringify(res.data.listPermission)) - localStorage.setItem('id',JSON.stringify(res.data.id)) - localStorage.setItem('userType',JSON.stringify(res.data.userType)) - - router.push("/user");//overview - }).catch(error => { - loading.value = false; - proxy.$modal.msgError('登录失败!') - }) - } - }); + } + }); } + function getCookie() { - const userName = Cookies.get("userName"); - const password = Cookies.get("password"); - const rememberMe = Cookies.get("rememberMe"); - loginForm.value = { - userName: userName === undefined ? loginForm.value.userName : userName, - password: password === undefined ? loginForm.value.password : decrypt(password), - rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) - }; + const userName = Cookies.get("userName"); + const password = Cookies.get("password"); + const rememberMe = Cookies.get("rememberMe"); + loginForm.userName = userName === undefined ? loginForm.userName : userName; + loginForm.password = password === undefined ? loginForm.password : password; + loginForm.rememberMe = rememberMe === undefined ? loginForm.rememberMe : rememberMe; } -getCookie(); + +onMounted(() => { + getCookie(); + resetCode(); + getConputerId() +}) </script> <style lang='scss' scoped> -.login{ - position: relative; +.login { + position: relative; // justify-content: center; // align-items: center; width: 100%; height: 100%; background-image: url("../assets/images/login/login_bcg.png"); background-size: 100% 100%; - .login-bcg1{ - position: absolute; - height: 100%; - width:100%; - background-image: url("../assets/images/login/login_bcg1.png"); - background-size: 100% 100%; - } - .contain{ - position: absolute; - background-color: rgba(239, 245, 254, 0.75); - border-radius: 26px; - width: 76%; - height: 85%; - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - } - img{ - position: absolute; - width:44%; - height: 62%; - top: 16%; - left:-4%; - } - .login-form { - position: absolute; - width: 38%; - height:75%; - right:5%; - top:10%; - border-radius: 10px; - background: #ffffff; - padding: 25px; - box-shadow: 0 0 10px 4px #c4d4f7; - .title { - font-size: 40px; - margin: 10px 30px 100px; - text-align: center; - color: #000000; + .login-bcg1 { + position: absolute; + height: 100%; + width: 100%; + background-image: url("../assets/images/login/login_bcg1.png"); + background-size: 100% 100%; } - .el-form-item{ - margin: 40px auto 20px; - width: 85%; - :deep(.el-form-item__label){ - line-height: 45px; - font-size: large; - font-weight: 500; - } - .el-button{ - height: 50px; + + .contain { + position: absolute; + background-color: rgba(239, 245, 254, 0.75); + border-radius: 26px; + width: 76%; + height: 85%; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + } + + .left-img { + position: absolute; + width: 44%; + height: 62%; + top: 16%; + left: -4%; + } + + .login-form { + position: absolute; + width: 42%; + height: 80%; + right: 5%; + top: 10%; + border-radius: 10px; + background: #ffffff; + padding: 25px; + box-shadow: 0 0 10px 4px #c4d4f7; + + .title { + font-size: 40px; + margin: 10px 20px 70px; + text-align: center; + color: #000000; } - } - .check-box{ - width: 85%; - left: 50%; - transform:translate(-50%) ; - } + .el-form-item { + margin: 30px auto; + width: 85%; + + .yzm-box{ + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + :deep(.el-input){ + width: 60%; + } + .yzm{ + width: 35%; + display: flex; + align-items: center; + img{ + width: 100%; + } + } + } + + :deep(.el-form-item__label) { + line-height: 45px; + font-size: large; + font-weight: 500; + width: 80px; + } + + .el-button { + height: 50px; + } + } + + .check-box { + width: 85%; + left: 50%; + transform: translate(-50%); + } } } + .footer { - height: 40px; - line-height: 40px; - position: fixed; - bottom: 0; - width: 100%; - text-align: center; - color: #fff; - font-family: Arial; - font-size: 12px; - letter-spacing: 1px; + height: 40px; + line-height: 40px; + position: fixed; + bottom: 0; + width: 100%; + text-align: center; + color: #fff; + font-family: Arial; + font-size: 12px; + letter-spacing: 1px; } </style> diff --git a/src/views/meterReading/meterReadingMonthRecord/index.vue b/src/views/meterReading/meterReadingMonthRecord/index.vue index e22e50e..5003e06 100644 --- a/src/views/meterReading/meterReadingMonthRecord/index.vue +++ b/src/views/meterReading/meterReadingMonthRecord/index.vue @@ -9,7 +9,7 @@ <script setup> import meterReadingRecordApi from "@/api/meterReadingApi/meterReadingRecord"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; const {proxy} = getCurrentInstance(); diff --git a/src/views/meterReading/meterReadingRecord/index.vue b/src/views/meterReading/meterReadingRecord/index.vue index 9a8f641..7d5763e 100644 --- a/src/views/meterReading/meterReadingRecord/index.vue +++ b/src/views/meterReading/meterReadingRecord/index.vue @@ -9,7 +9,7 @@ <script setup> import meterReadingRecordApi from "@/api/meterReadingApi/meterReadingRecord"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/point/index.vue b/src/views/point/index.vue index a115658..05be6c2 100644 --- a/src/views/point/index.vue +++ b/src/views/point/index.vue @@ -13,7 +13,7 @@ import {longitudeReg, latitudeReg} from "@/utils/regular"; import {ref} from "vue"; import {region} from "@/api/basicApi/index.js"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; const route = useRoute(); const {proxy} = getCurrentInstance(); diff --git a/src/views/report/historyData/index.vue b/src/views/report/historyData/index.vue deleted file mode 100644 index 8cd83b3..0000000 --- a/src/views/report/historyData/index.vue +++ /dev/null @@ -1,21 +0,0 @@ -<!-- - * @Author: hqs elkers@163.com - * @Date: 2024-08-13 16:21:38 - * @LastEditors: hqs elkers@163.com - * @LastEditTime: 2024-08-13 19:00:41 - * @FilePath: \water-qinghe-web\src\views\report\historyData\index.vue - * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE ---> -<template> - <div> -历史数据 - </div> -</template> - -<script setup> - -</script> - -<style lang="scss" scoped> - -</style> \ No newline at end of file diff --git a/src/views/report/revenueReport/index.vue b/src/views/report/revenueReport/index.vue deleted file mode 100644 index f258aba..0000000 --- a/src/views/report/revenueReport/index.vue +++ /dev/null @@ -1,13 +0,0 @@ -<template> - <div> -营收报表 - </div> -</template> - -<script setup> - -</script> - -<style lang="scss" scoped> - -</style> \ No newline at end of file diff --git a/src/views/screen/alarm/index.vue b/src/views/screen/alarm/index.vue deleted file mode 100644 index 6caa4d5..0000000 --- a/src/views/screen/alarm/index.vue +++ /dev/null @@ -1,588 +0,0 @@ -<template> - <div class="alarm-container"> - <div class="left-content"> - <div class="handle-box"> - <div class="handle-title">报警处理</div> - <div class="handle-content"> - <div class="handle-echarts"> - <div id="handel"></div> - </div> - <div class="handel-box"> - <ul> - <li v-for="(item,index) in toBeHandData" :style="{color:item.color}">{{item.description}}</li> - </ul> - </div> - </div> - </div> - <div class="analysis-box"> - <div class="analysis-title">报警分析</div> - <div class="analysis-content"> - <div id="analysis"></div> - <div class="analysis-mini"> - <div v-for="(item,index) in statisticList" class="mini-item" :key="index"> - <div :style="{background:item.color}"></div> - <div>{{ item.description}}</div> - </div> - </div> - </div> - </div> - </div> - <div class="right-content"> - <div class="table-box"> - <div class="table-title">报警记录</div> - <div class="table-content"> - <el-table v-loading="loading" :data="tableData" width="100%" max-height="690px"> - <el-table-column - label="序号" - align="center" - prop="num" - fixed="left" - > - </el-table-column> - <el-table-column - v-for="(item, key, index) of tableHeader" - :prop="key.toString()" - :label="item" - :key="index" - align="center" - > - </el-table-column> - </el-table> - </div> - <div class="pagination"> - <el-pagination - v-model:current-page="pageParam.page" - background - :page-size="pageParam.limit" - layout="total,prev, pager, next, jumper" - :total="pageParam.total" - @current-change="currentPage" - /> - </div> - </div> - </div> - </div> -</template> - -<script setup> -import alarmHistoryApi from '@/api/alarmApi/alarmHistory' -import alarm from '@/api/screen/alarm/index' -import * as echarts from 'echarts' -import {romColor,screenAlarmColor} from '@/utils/color' -import {onBeforeUnmount} from "vue"; - - -//初始化echarts -let loadingEcharts = { - text: 'loading', - textColor: 'rgba(105,133,219, 1)', - maskColor: 'rgba(202, 224, 252, 0.2)', - fontSize: '20px', -} -let analysisEcharts = undefined -let handelEcharts = undefined -const initEcharts = () =>{ - analysisEcharts = echarts.init(document.getElementById('analysis')); - handelEcharts = echarts.init(document.getElementById('handel')); -} -/** - * 报警处理 - * */ - -//echarts配置项 -const setHandelOptions = () =>{ - let option = { - tooltip: { - trigger: 'item', - }, - series: [ - { - name: '报警处理', - type: 'pie', - radius: ['30%', '70%'], // 设置饼图的内半径和外半径,形成圆环 - center: ['50%', '50%'], // 饼图的中心(圆心)坐标 - roseType: 'radius', // 设置为南丁格尔图,'radius'模式 - itemStyle: { - borderRadius: 5 - }, - data: handleData.value, - label:{ - formatter: '{b}:{c}单 \n\n 占比:{d}%', - textStyle: { - fontSize: 18, - color:'#77C9A3', - fontWeight:500 - } - } - } - ] - }; - handelEcharts.setOption(option,true); -} -//请求报警处理数据 -const handleData = ref([]) -const getHandelData = async () => { - handelEcharts.showLoading(loadingEcharts) - await alarm().getHandel().then((res) => { - let list = [] - list.push({value:res.data.YesSolve,name:'已处理'}) //{YesSolve noSolve } - list.push({value:res.data.noSolve,name:'未处理'}) //{YesSolve noSolve } - handleData.value = list - handleData.value.forEach((item,index) => { - if(item.name === '未处理'){ - item.label={ show:true,color:'#C97F7F'} - }else{ - item.label={ show:true,color:'#77C9A3'} - } - }) - }) - handelEcharts.hideLoading() - setHandelOptions() -} -//待处理数据 -const toBeHandData = ref([]) -const handelColor = screenAlarmColor() -const gettoBeHandelData = async () => { - let val = {limit:10000,page:1,isSolve:0} - await alarmHistoryApi().search(val).then((res) =>{ - toBeHandData.value = res.data.list - toBeHandData.value.forEach((item,index) => { - item.color = handelColor[index] - }) - }) - setHandelOptions() -} -/** - * 报警分析 - * */ -//echarts配置项 -const colors = romColor() -const setAnalysisOptions = () =>{ - //自定义颜色组 - const itemStyles = statisticData.value.map(() => colors.shift()); - statisticList.value.forEach((item,index) => { - item.color = itemStyles[index] - }) - let option = { - legend:{}, - xAxis: { - type: 'category', - data:statisticDataName.value, - axisTick:{ - show: false, - }, - axisLabel:{ - color:'#BAEBEC', - fontSize: 14 - }, - }, - yAxis: { - type: 'value', - splitLine:{ - show:true, - lineStyle:{ - width:1, - color:'rgba(231,236,240,0.1)', - } - }, - axisLabel:{ - color:'#BAEBEC', - fontSize: 16 - }, - axisLine:{ - show: true, - lineStyle:{ - color:'rgba(231,236,240,0.4)', - width:1 - } - }, - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - }, - }, - series: { - data:statisticData.value.map((value,index) =>({ - value, - itemStyle: { - color: itemStyles[index] - } - })), - type: 'bar' - }, - grid:{ - width:'95%', - height:'80%', - top:'10%', - left:'8%', - } - }; - analysisEcharts.setOption(option,true); -} -//请求分析数据 -const statisticList = ref() -const statisticData = ref() -const statisticDataName = ref() -const getStatictis = async () =>{ - analysisEcharts.showLoading(loadingEcharts) - await alarm().get().then((res) =>{ - statisticList.value = res.data - let list = [] - let listName = [] - res.data.forEach((item) =>{ - list.push(item.count) - listName.push(item.description) - }) - statisticData.value = list - statisticDataName.value = listName - }) - analysisEcharts.hideLoading() - setAnalysisOptions() - } -/** - * Table表格数据列表相关 - */ -const pageParam = ref({ - total:200, - limit:10, - page:1, -}) -const tableData = ref([]); -let tableHeader = ref({ - description: "报警内容", - code: "代码", - createTimeView: "报警时间", -}) - -/** 获取列表 */ -const loading = ref(false); -async function getTableData(val) { - loading.value = true; - if(val){ - if(!val.limit){ - val.limit = 8 - } - if(!val.page){ - val.page = 8 - } - }else{ - val = { limit:8,page:1 } - } - await alarmHistoryApi().search(val).then((res) =>{ - tableData.value = res.data.list - //添加序号 - tableData.value.forEach((item,index) =>{ - item.num = index + 1 - }) - //分页参数 - pageParam.value.total = res.data.total - pageParam.value.limit = res.data.limit - pageParam.value.page = res.data.page - }) - loading.value = false; -} -//分页 -const currentPage = (val) =>{ - getTableData({page:val}) -} -window.addEventListener('resize', function() { - analysisEcharts.resize(); - handelEcharts.resize(); -}); -onMounted(async () => { - initEcharts() - await getStatictis() - getHandelData() - gettoBeHandelData() - await getTableData() -}) -//卸载前销毁图表 -const disposeEcharts = (echarts) => { - if (echarts) { - echarts.dispose(); - echarts = null; - } -} -onBeforeUnmount(async ()=> { - disposeEcharts(analysisEcharts) - disposeEcharts(handelEcharts) -}) -</script> - -<style lang="scss" scoped> -.alarm-container{ - width: 100%; - height: 100%; - padding:1%; - display:flex; - justify-content:center; - .left-content{ - width: 50.5%; - height: 100%; - //background: #a2b9e8; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - .handle-box{ - width: 100%; - height:46.5%; - background-image: url("../../../assets/images/screen/alarm/analysis.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - padding:1.5%; - .handle-title{ - width: 100%; - height:13%; - background-image: url("../../../assets/images/screen/alarm/title-icon.png"); - background-repeat: no-repeat; - background-position:5% 100%; - font-weight: 400; - font-size: 20px; - color: #FFFFFF; - display: flex; - align-items:flex-end; - padding-left:12%; - } - .handle-content{ - width: 100%; - height:87%; - display: flex; - padding-left: 10%; - position: relative; - .handle-echarts{ - width: 63%; - height: 100%; - background-image: url("../../../assets/images/screen/alarm/center.png"); - background-repeat: no-repeat; - background-position: center; - display: flex; - align-items: center; - justify-content: center; - #handel{ - width: 100%; - height: 100%; - } - } - .handel-box{ - right: 5%; - position: absolute; - width: 30%; - height: 100%; - padding:2% 0 4%; - ul{ - background:transparent; - border: 1px solid #1FB0BE; - border-radius: 10px; - height: 100%; - padding-top:3%; - opacity: 0.8; - overflow-y: auto; - li{ - list-style-type:circle; - margin-top: 2%; - font-size: 16px; - font-weight: lighter; - } - } - } - } - } - .analysis-box{ - width: 100%; - height:53.5%; - background-image: url("../../../assets/images/screen/alarm/handle.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - display: flex; - flex-direction: column; - justify-content: space-around; - padding:1.5%; - .analysis-title{ - width: 100%; - height: 12%; - background-image: url("../../../assets/images/screen/alarm/title-icon.png"); - background-repeat: no-repeat; - background-position:5% 100%; - padding:2% 0 0 12%; - font-weight: 400; - font-size: 20px; - color: #FFFFFF; - } - .analysis-content{ - width: 100%; - height: 88%; - display: flex; - align-items: center; - justify-content:center; - #analysis{ - width: 70%; - height: 100%; - } - .analysis-mini{ - width: 29%; - height: 80%; - display: flex; - flex-wrap: wrap; - align-items: center; - padding: 0 2%; - .mini-item{ - width:50%; - height:10%; - display: flex; - justify-content: space-evenly; - align-items: center; - div:last-child{ - font-weight: 400; - font-size: 14px; - color: #BAEBEC; - width: 50%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } - div:first-child{ - width: 20px; - height: 20px; - background: #ecd4e6; - border-radius: 2px; - } - } - } - } - } - } - .right-content{ - width: 49.5%; - height: 100%; - .table-box{ - width: 100%; - height: 100%; - background-image: url("../../../assets/images/screen/alarm/table-border.png"); - background-repeat: no-repeat; - background-size: 98% 96%; - background-position: 50% 50%; - position: relative; - .table-title{ - position: absolute; - top: 2.5%; - left: 1.5%; - height:8%; - width:97%; - display: flex; - justify-content:center; - align-items: center; - font-weight: 500; - font-size: 22px; - color: #8DFEFF; - background: linear-gradient(to right,rgba(21,173,248,0.5),rgba(66,93,114,0.3)); - } - .table-content{ - position: absolute; - top: 10%; - left: 1.5%; - height:77%; - width:100%; - padding: 1% 4%; - overflow-y: hidden; - //修改边框和字体 - :deep(.el-table){ - --el-table-border-color:rgba(0,0,0,0); - font-weight: 400; - font-size: 20px; - color: #D1D1D1; - } - //修改头部字体 - :deep(.el-table__header th){ - font-weight: 400; - font-size: 20px; - color: #D1D1D1; - } - /*最外层透明*/ - :deep(.el-table), - :deep(.el-table__expanded-cell){ - background-color: transparent !important; - } - /* 表格内背景颜色 */ - :deep(.el-table th), - :deep(.el-table tr), - :deep(.el-table td){ - background-color: transparent !important; - border-bottom:1px solid #1D627D !important; - } - //:deep(.el-table tr){ - // border:1px solid #000 !important; - //} - /*去除底边框*/ - :deep(.el-table td.el-table__cell){ - border:0; - } - :deep(.el-table th.el-table__cell.is-leaf) { - border: 0; - } - /*去除底部灰条.el-table::before*/ - :deep(.el-table::before) { - display: none; - } - } - .pagination{ - position: absolute; - top: 90%; - left: 1.5%; - width:100%; - height:10%; - display:flex; - justify-content:center; - :deep(.el-pagination__total), - :deep(.el-pagination__goto), - :deep(.el-pagination__classifier){ - color: #bcd4f3 - } - :deep(.el-pager li) { - font-size: 15px; - color: #BAEBEC; - background: transparent; - padding: 0 4px; - border: 1px solid #BAEBEC; - border-radius: 0; - margin: 0 4px; - min-width: 25px; - height: 25px; - } - :deep(.el-pagination button) { - color: #BAEBEC; - background: transparent; - padding: 0 4px; - border-radius: 0; - margin: 0 4px; - } - :deep(.el-pagination .btn-next .el-icon), - :deep(.el-pagination .btn-prev .el-icon) { - font-size: 18px !important; - } - :deep(.el-input__wrapper) { - background: transparent; - box-shadow: 0 0 0 1px #BAEBEC inset; - border-radius: 0; - height: 25px; - min-width: 30px; - } - :deep(.el-input__inner) { - font-size: 16px; - color: #BAEBEC; - height: 25px; - line-height: 30px !important; - } - :deep(.el-pager li.is-active) { - background-color: #1FB0BE; - color: #ffffff; - border: 1px solid #1FB0BE; - } - } - } - } -} -</style> \ No newline at end of file diff --git a/src/views/screen/facility/index.vue b/src/views/screen/facility/index.vue deleted file mode 100644 index 068e75d..0000000 --- a/src/views/screen/facility/index.vue +++ /dev/null @@ -1,368 +0,0 @@ -<template> - <div class="facility-container"> - <div class="left-content"> - <div class="left-title">设备资料</div> - <div class="img-box"> - <div class="left-img" :style="backgroundStyle"> - <img v-if="!formDetail.facilityUrl" :src="defaultImg" alt=""> - </div> - </div> - <div class="left-detail"> - <p>设备名称:{{formDetail.facilityName}}</p> - <p>生产厂家:{{formDetail.supplier}}</p> - <p>出厂日期:{{formDetail.installDate}}</p> - </div> - </div> - <div class="right-content"> - <div class="search-box"> - <el-input class="search-input" v-model="searchParam"></el-input> - <el-button class="search-btn" @click="searchList">搜索</el-button> - </div> - <div class="table-box"> - <div class="table-title">设备列表</div> - <div class="table-content"> - <el-table v-loading="loading" :data="tableData" width="100%" max-height="690px"> - <el-table-column - label="序号" - align="center" - prop="num" - fixed="left" - > - </el-table-column> - <el-table-column - v-for="(item, key, index) of tableHeader" - :prop="key.toString()" - :label="item" - :key="index" - align="center" - > - <template #default="scope"> - <div v-if="key.toString() === 'detail'" class="table-handle"> - <div @click="toDetail(scope.row)"></div> - </div> - </template> - </el-table-column> - </el-table> - </div> - <div class="pagination"> - <el-pagination - v-model:current-page="pageParam.page" - background - :page-size="pageParam.limit" - layout="total,prev, pager, next, jumper" - :total="pageParam.total" - @current-change="currentPage" - /> - </div> - </div> - </div> - </div> -</template> - -<script setup> -import facilityApi from '@/api/facility/index' -import { PREURL} from '@/config/index' -import defaultImage from '@/assets/images/screen/facility/no-img.png' - -//搜索 -const searchParam = ref() -const searchList = () =>{ - getTableData({keywords:searchParam.value}) -} -/** - * Table表格权限数据列表相关 - */ -const pageParam = ref({ - total:200, - limit:15, - page:1, -}) -const tableData = ref([]); -let tableHeader = ref({ - facilityCode: "设备编号", - facilityName: "设备名称", - address: "安装地点", - installDate: "安装时间", - detail: "设备详情", -}) - -/** 获取列表 */ -const loading = ref(false); -async function getTableData(val) { - loading.value = true; - if(val){ - if(!val.limit){ - val.limit = 5 - } - if(!val.page){ - val.page = 1 - } - }else{ - val = { limit:5,page:1 } - } - await facilityApi().search(val).then((res) =>{ - tableData.value = res.data.list - //添加序号 - tableData.value.forEach((item,index) =>{ - item.num = index + 1 - }) - //设置详情为tableData第一项 - formDetail.value.facilityName = tableData.value[0].facilityName - formDetail.value.supplier = tableData.value[0].supplier - formDetail.value.installDate = tableData.value[0].installDate - formDetail.value.facilityUrl = tableData.value[0].facilityUrl - console.log('formDetail.value.facilityUrl',formDetail.value.facilityUrl) - //分页参数 - pageParam.value.total = res.data.total - pageParam.value.limit = res.data.limit - pageParam.value.page = res.data.page - }) - loading.value = false; -} -//分页 -const currentPage = (val) =>{ - getTableData({page:val}) -} -// 详情 - -const formDetail = ref({ - facilityName:'', - supplier:'', - installDate:'', - facilityUrl:'', -}) -const defaultImg = ref(defaultImage) -const toDetail = (row) =>{ - formDetail.value.facilityName = row.facilityName - formDetail.value.supplier = row.supplier - formDetail.value.installDate = row.installDate - formDetail.value.facilityUrl = row.facilityUrl - console.log('todetail',formDetail.value.facilityUrl) -} -const backgroundStyle = computed(() => ({ - backgroundImage: `url('${ PREURL+ formDetail.value.facilityUrl }')`, - backgroundSize: 'contain', - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', -})); -onMounted(async ()=>{ - await getTableData() -}) -</script> - -<style lang="scss" scoped> -.facility-container{ - width: 100%; - height:100%; - padding:0 3% 1% 3%; - display:flex; - justify-content: space-between; -} -.left-content{ - width:22%; - height:100%; - background-image: url("../../../assets/images/screen/facility/left-box.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - padding:4% 1% 1%; - .left-title{ - width: 100%; - height:5%; - background-image: url("../../../assets/images/screen/facility/left-title.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - font-weight: 400; - font-size: 20px; - color: #FFFFFF; - padding-left:9%; - padding-top:1%; - } - .img-box{ - width:83%; - height:35%; - background: rgba(244, 248, 250, 0.21); - border-radius: 10px; - margin: 15% auto 0; - padding: 1%; - .left-img{ - width:100%; - height:100%; - display: flex; - align-items: center; - justify-content: center; - } - } - .left-detail{ - width:100%; - height: 30%; - //background: rgba(255, 255, 255, 0.29); - padding:6% 10% 10%; - p{ - font-weight: 400; - font-size: 16px; - color: #FFFFFF; - //background: rgba(0, 175, 240, 0.51); - } - } -} -.right-content{ - width:76%;//698 - height:100%;//918.7 - display:flex; - justify-content: space-between; - flex-direction: column; - align-items: center; - padding:1% 0; - .search-box{ - width:100%; - height:6%; - display: flex; - .search-input{ - width:70%; - height:100%; - margin-right:3%; - :deep(.el-input__wrapper){ - background:linear-gradient(to right ,rgba(6,92,135,0.56),rgba(6,92,135,0.16)) !important; - border: 1px solid #1fb0be !important; - border-radius: 8px !important; - } - .el-input.is-focus .el-input__inner{ - border-color: #2ec4d2 !important; - } - } - .search-btn{ - width:7%; - height:100%; - background-color: #2a6bb6 !important; - border: 1px solid #03e9ff !important; - border-radius: 8px !important; - font-weight: 400; - font-size: 22px; - color: #B9F9FF; - } - } - .table-box{ - width:100%; - height:89%; - background-image: url("../../../assets/images/screen/facility/right-box.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - .table-title{ - height:10%; - width:100%; - display: flex; - justify-content:center; - align-items: center; - font-weight: 500; - font-size: 22px; - color: #8DFEFF; - } - .table-content{ - height:80%; - width:100%; - padding: 1% 4%; - //background: #1D2129; - //修改边框和字体 - :deep(.el-table){ - --el-table-border-color:rgba(0,0,0,0); - font-weight: 400; - font-size: 20px; - color: #D1D1D1; - } - //修改头部字体 - :deep(.el-table__header th){ - font-weight: 400; - font-size: 20px; - color: #D1D1D1; - } - /*最外层透明*/ - :deep(.el-table), - :deep(.el-table__expanded-cell){ - background-color: transparent !important; - } - /* 表格内背景颜色 */ - :deep(.el-table th), - :deep(.el-table tr), - :deep(.el-table td){ - background-color: transparent !important; - border-bottom:1px solid #1D627D !important; - } - //:deep(.el-table tr){ - // border:1px solid #000 !important; - //} - /*去除底边框*/ - :deep(.el-table td.el-table__cell){ - border:0; - } - :deep(.el-table th.el-table__cell.is-leaf) { - border: 0; - } - /*去除底部灰条.el-table::before*/ - :deep(.el-table::before) { - display: none; - } - .table-handle{ - display: flex; - align-items: center; - justify-content: center; - div{ - width:30px; - height: 30px; - background-image: url("../../../assets/images/screen/facility/detail.png"); - } - } - } - .pagination{ - width:100%; - height:10%; - display:flex; - justify-content:center; - :deep(.el-pagination__total), - :deep(.el-pagination__goto), - :deep(.el-pagination__classifier){ - color: #bcd4f3 - } - :deep(.el-pager li) { - font-size: 15px; - color: #BAEBEC; - background: transparent; - padding: 0 4px; - border: 1px solid #BAEBEC; - border-radius: 0; - margin: 0 4px; - min-width: 25px; - height: 25px; - } - :deep(.el-pagination button) { - color: #BAEBEC; - background: transparent; - padding: 0 4px; - border-radius: 0; - margin: 0 4px; - } - :deep(.el-pagination .btn-next .el-icon), - :deep(.el-pagination .btn-prev .el-icon) { - font-size: 18px !important; - } - :deep(.el-input__wrapper) { - background: transparent; - box-shadow: 0 0 0 1px #BAEBEC inset; - border-radius: 0; - height: 25px; - min-width: 30px; - } - :deep(.el-input__inner) { - font-size: 16px; - color: #BAEBEC; - height: 25px; - line-height: 30px !important; - } - :deep(.el-pager li.is-active) { - background-color: #1FB0BE; - color: #ffffff; - border: 1px solid #1FB0BE; - } - } - } -} -</style> \ No newline at end of file diff --git a/src/views/screen/flow/home/index.vue b/src/views/screen/flow/home/index.vue new file mode 100644 index 0000000..cc83e75 --- /dev/null +++ b/src/views/screen/flow/home/index.vue @@ -0,0 +1,145 @@ +<template> + <div class="home"> + <div class="home-bg"></div> + <div class="home-c"> + <div class="point"> + <div class="point-address"></div> + <div class="point-message"> + <div class="video-box"> + <el-icon><VideoPlay /></el-icon> + </div> + <div class="info-box"> + <div class="info-t">水电站流量监测点</div> + <div class="info-sw">水位:<span>500</span>m</div> + <div class="info-ls">流速:<span>15</span>m/s</div> + <div class="info-ssls">瞬时流速:<span>150</span>m/s</div> + <div class="info-ljll"> + 累计流量: + <el-select + v-model="selectll" + class="m-2" + placeholder="Select" + size="small" + style="width: 240px" + > + <el-option + v-for="(item, idx) in liuliangOptions" + :key="idx" + :label="item.label" + :value="idx" + /> + </el-select> + <span>{{ liuliangOptions[selectll].value }}</span>m/s + </div> + </div> + </div> + </div> + </div> + </div> +</template> + + +<script setup> + +import {ref} from "vue"; + +const selectll = ref(0) + +const liuliangOptions = [ + { label: '总计流量', value: 500 }, + { label: '日累计流量', value: 1000 }, + { label: '周累计流量', value: 10000 }, + { label: '月累计流量', value: 300000 }, + { label: '年累计流量', value: 3600000 }, +] + +</script> + + +<style scoped lang="scss"> +.home{ + height: 100%; + .home-bg{ + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: url("@/assets/images/map-bg.png") no-repeat; + background-size: 100% 100%; + z-index: -1; + } + .home-c{ + width: 100%; + height: 100%; + position: relative; + .point{ + position: absolute; + left: 58%; + top: 30%; + .point-address{ + width: 35px; + height: 40px; + background: url("@/assets/images/point.png") no-repeat; + background-size: 100% 100%; + } + .point-message{ + width: 600px; + height: 200px; + background: url("@/assets/images/messageInfo-box.png") no-repeat; + background-size: 100% 100%; + position: absolute; + left: -600px; + top: -100px; + padding: 30px 50px 30px 30px; + color: #fff; + display: flex; + align-items: center; + gap: 20px; + .video-box{ + flex-shrink: 0; + width: 200px; + height: 138px; + line-height: 138px; + text-align: center; + font-size: 38px; + background: #cccb40; + } + .info-box{ + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + .info-t{ + font-size: 20px; + } + .info-ljll{ + display: flex; + align-items: center; + :deep(.el-select){ + width: 100px !important; + .el-select__wrapper{ + color: #fff; + background: transparent; + .el-select__selected-item{ + color: #fff; + } + .el-select__suffix .el-icon{ + color: #fff; + } + &:hover{ + box-shadow: none; + } + } + } + } + span{ + display: inline-block; + padding: 0 10px; + } + } + } + } + } +} +</style> \ No newline at end of file diff --git a/src/views/screen/irrigate/index.vue b/src/views/screen/irrigate/index.vue deleted file mode 100644 index f60066a..0000000 --- a/src/views/screen/irrigate/index.vue +++ /dev/null @@ -1,926 +0,0 @@ -<template> - <div class="dma-container"> - <div class="content"> - <!-- 左 ------------------------------------------ --> - <div class="left contbox"> - - <div class="titbox"> - <img src="../../../assets/images/screen/irrigate/titbox.png" alt="" srcset=""> - <span>操作记录</span> - </div> - <div class="table-box"> - <el-table v-loading="loading" :data="tableData" max-height="700px"> - <el-table-column - v-for="(item, key, index) of tableHeader" - :prop="key.toString()" - :label="item" - :key="index" - align="center" - ></el-table-column> - </el-table> - </div> - </div> - <!-- 中 ------------------------------------------ --> - <div class="main"> - <div class="map"> - - - - </div> - <div > - <img class="circle" src="../../../assets/images/screen/irrigate/mapdh.png"> - </div> - </div> - <!-- 右 ------------------------------------------ --> - <div class="right contbox"> - <div class="titbox"> - <img src="../../../assets/images/screen/irrigate/titbox.png" alt="" srcset=""> - <span>阀门策略</span> - </div> - <div class="table-box"> - <el-table v-loading="loading" :data="tableData2" max-height="700px"> - <el-table-column - v-for="(item, key, index) of tableHeader2" - :prop="key.toString()" - :label="item" - :key="index" - align="center" - ></el-table-column> - <el-table-column label="操作" width="80" align="center" > - <template #default="scope"> - <!-- <el-button link type="primary" icon="Edit" @click="handleband(scope.row)">参数绑定</el-button> --> - <div @click="handleband(scope.row)" class="clcbox">开启 </div> - </template> - </el-table-column> - </el-table> - </div> - </div> - </div> - </div> -</template> - -<script setup> -import { getCurrentInstance,onBeforeUnmount,onMounted } from 'vue'; -import dma from "@/api/screen/dma/index"; -import overview from '@/api/screen/overview/index'; -import * as echarts from 'echarts' -import pointApi from "@/api/facility/point.js"; -const { proxy }= getCurrentInstance() -/** - * 地图取水点 - */ -const pointInfo = ref([ - {name:'监控点1',liquidLevel:'0',flow:'0.00',pressure:'0.00',class:'point-one point'}, - {name:'监控点2',liquidLevel:'0',flow:'0.00',pressure:'0.00',class:'point-two point'}, - {name:'监控点3',liquidLevel:'0',flow:'0.00',pressure:'0.00',class:'point-three point'}, -]) -const getPointInfo = async () =>{ - await overview().getDataOverview().then((res) => { - res.data.forEach((item,index1)=> { - pointInfo.value[index1].name = item.pointName - item.dataList.forEach((item) => { - //液位 - // if(item.columnsCode === '1001'){ - // pointInfo.value[index1].liquidLevel = item.columnsValue - // } - //流量 - if(item.columnsCode === '1011'){ - pointInfo.value[index1].flow = item.columnsValue - } - //压力 - if(item.columnsCode === '1002'){ - pointInfo.value[index1].pressure = item.columnsValue - } - }) - }) - }) - pointInfo.value.forEach((item) =>{ - item.flow = Number(item.flow).toFixed(2) - item.pressure = Number(item.pressure).toFixed(2) - }) -} -getPointInfo() -/** - * Echarts 图表 - */ -let pressureChart -let liquidLevelChart -let flowChart -let analysisChart -let entranceChart -//初始化Echarts -let initCharts = () =>{ - pressureChart = echarts.init(document.getElementById('pressure')); - liquidLevelChart = echarts.init(document.getElementById('liquidLevel')); - flowChart = echarts.init(document.getElementById('flow')); - analysisChart = echarts.init(document.getElementById('analysis')); - entranceChart = echarts.init(document.getElementById('entrance')); -} -let loadingEcharts = { - text: 'loading', - textColor: 'rgba(105,133,219, 1)', - maskColor: 'rgba(202, 224, 252, 0.2)', - fontSize: '20px', -} -/** - * 搜索 - */ -const pointList = ref([]) -const pointId = ref(); -const getPointList = async() =>{ - - //区域列表 - let res = await pointApi().search({limit: 10000, page: 1}) - if(res.code == 200){ - pointList.value = res.data.list - pointId.value = pointList.value[0].id - console.log("获取监控点数据",pointList.value); - }else{ - proxy.$modal.msgError('获取数据失败,请刷新再试!') - } -} -//选中数据 -const searchPoint = () =>{ - getListData({type:'1',pointId:pointId.value}) -} -//报警相关 -const alarmList = ref([ - // {text:'1.1号区域瞬时压力过大,水温过高',date:'2024-08-18 15:12:36'}, - // {text:'2.1号区域管道超过检修时间',date:'2024-08-18 15:12:36'}, - // {text:'3.2号区城瞬时压力过大',date:'2024-08-18 15:12:36'}, - // {text:'4.2号区域管道破损',date:'2024-08-1815:12:36'}, - // {text:'4.2号区域管道破损',date:'2024-08-1815:12:36'}, - // {text:'4.2号区域管道破损',date:'2024-08-1815:12:36'}, -]) -async function getAlarmData(){ - await dma().alarm({limit:10000,page:1}).then((res) =>{ - alarmList.value = res.data.list - }) -} - -//获取液位监测数据 -let liquidLevelList = [[],[],[]] -const getLiquidLevelList = async(val) =>{ - liquidLevelChart.showLoading(loadingEcharts) - val.columnsCodeList = ['1001'] - let res = await dma().searchMonitor(val) - liquidLevelChart.hideLoading() - liquidLevelList = [[],[],[]] - if(res.code == 200){ - res.data.forEach((item) =>{ - if(item.facilityCode === 'YWJ001' || item.facilityCode === 'YWJ002' || item.facilityCode === 'YWJ003'){ - liquidLevelList[0].push([item.uploadTimeView,Number(item.columnsValue)]) - } - if(item.facilityCode === 'YWJ004' || item.facilityCode === 'YWJ005' || item.facilityCode === 'YWJ006'){ - liquidLevelList[1].push([item.uploadTimeView,Number(item.columnsValue)]) - } - // if(item.facilityName === '3#液位计'){ - // liquidLevelList[2].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - }) - }else{ - // proxy.$modal.msgError('暂无液位数据') - } - setOptions(liquidLevelList,liquidLevelChart,['1#液位计','高位水池液位','3#液位计'],'( m3/h )') - console.log('pre-get',liquidLevelList); -} -//获取压力监测数据 -let pressureList = [[],[],[]] -const getPressureList = async(val) =>{ - pressureChart.showLoading(loadingEcharts) - val.columnsCodeList = ['1002'] - let res = await dma().searchMonitor(val) - pressureChart.hideLoading() - pressureList = [[],[],[]] - if(res.code == 200){ - res.data.forEach((item) =>{ - if(item.facilityCode === '000243617545' || item.facilityCode === '000243617546' || item.facilityCode === '000243617547'){ - pressureList[0].push([item.uploadTimeView,Number(item.columnsValue)]) - } - // if(item.facilityName === '压力计2'){ - // pressureList[1].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - // if(item.facilityName === '压力计3'){ - // pressureList[2].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - }) - }else{ - // proxy.$modal.msgError('获取列表失败,请刷新重试!') - } - setOptions(pressureList,pressureChart,['1#压力计','2#压力计','3#压力计'],'( Mpa )') - console.log('pre-get',pressureList); -} -//获取流量监测数据 -let flowList = [[],[],[]] -const getFlowList = async(val) =>{ - flowChart.showLoading(loadingEcharts) - val.columnsCodeList = ['1012'] - let res = await dma().searchMonitor(val) - flowChart.hideLoading() - flowList = [[],[],[]] - if(res.code == 200){ - res.data.forEach((item,index) =>{ - if(item.facilityCode === 'LLJ001' || item.facilityCode === 'LLJ002' || item.facilityCode === 'LLJ003'){ - flowList[0].push([item.uploadTimeView,Number(item.columnsValue)]) - } - // if(item.facilityName === '2#流量计'){ - // flowList[1].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - // if(item.facilityName === '3#流量计'){ - // flowList[2].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - // data.push([item.uploadTimeView,Number(item.columnsValue)]) - }) - }else{ - proxy.$modal.msgError('获取列表失败,请刷新重试!') - } - console.log('flowList',flowList) - setOptions(flowList,flowChart,['1#流量计','2#流量计','3#流量计'],'( t )') -} - -//获取夜间流量监测数据 -let flowNightList = [[],[],[]] -const getAnalysisList = async(val) =>{ - analysisChart.showLoading(loadingEcharts) - val.columnsCodeList = ['1012'] - let res = await dma().searchStatistic(val) - analysisChart.hideLoading() - flowNightList = [[],[],[]] - if(res.code == 200){ - res.data.forEach((item,index) =>{ - if(item.facilityCode === 'LLJ001' || item.facilityCode === 'LLJ002' || item.facilityCode === 'LLJ003'){ - flowNightList[0].push([item.uploadTimeView,Number(item.columnsValue)]) - } - // if(item.facilityName === '2#流量计'){ - // flowNightList[1].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - // if(item.facilityName === '3#流量计'){ - // flowNightList[2].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - }) - }else{ - proxy.$modal.msgError('获取列表失败,请刷新重试!') - } - console.log('flowNightList',flowNightList) - setOptions(flowNightList,analysisChart,['1#流量计','2#流量计','3#流量计'],'( t )') -} -/** - * echart配置 - * - */ -const setOptions = (datalist,echart,title,yAxisTitle) =>{ - let options = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'line' , - lineStyle:{ - color:'#f3eadc', - }, - snap:true, - }, - }, - grid:{ - width:'80%', - left:'8%', - bottom: '12%' - }, - xAxis: { - name:'Date', - type: 'time',//横坐标设为时间,根据data当日时间自动对应,data横坐标为时间格式 - axisTick:{ - show:false, - }, - axisLabel:{ - show:false, - }, - axisLine:{ - show:true, - lineStyle:{ - color:'#bdc3c7', - width:1, - }, - }, - }, - yAxis: { - name:yAxisTitle, - type: 'value', - boundaryGap:false, - axisLine:{ - show:true, - lineStyle:{ - color:'#bdc3c7', - width:1, - }, - }, - axisLabel:{ - color:'#C8C8C8', - }, - splitLine:{ - show:false, - } - }, - series: [ - { - name: title[0], - type: 'line', - symbol: 'none', - data:datalist[0], - itemStyle: { - color: '#1459a8', - }, - lineStyle:{ - color: '#1459a8', - width:1, - }, - - labelLine:{ - show:false, - }, - smooth:true, - areaStyle: { - color: new echarts.graphic.LinearGradient( - 0, 0, 0, 1, - [ - {offset: 0, color:'#1459a8'}, - {offset: 1, color:'#7cb2f1'} - ] - ) - } - }, - { - name: title[1], - type: 'line', - symbol: 'none', - data:datalist[1], - itemStyle: { - color: '#12835c', - }, - lineStyle:{ - color: '#12835c', - width:1, - }, - smooth:true, - areaStyle: { - color: new echarts.graphic.LinearGradient( - 0, 0, 0, 1, - [ - {offset: 0, color:'#12835c'}, - {offset: 1, color:'#ace4d1'} - ] - ) - } - }, - { - name: title[2], - type: 'line', - symbol: 'none', - data:datalist[2], - itemStyle: { - color: '#04748c', - }, - lineStyle:{ - color: '#04748c', - width:1, - }, - smooth:true, - areaStyle: { - color: new echarts.graphic.LinearGradient( - 0, 0, 0, 1, - [ - {offset: 0, color:'#04748c'}, - {offset: 1, color:'#7fd8ec'} - ] - ) - } - } - ], - } - echart.clear() - echart.setOption(options,true) -} - -//DMA入口水量曲线 -const getListEntrance = () =>{ - const entranceList = [ - ['2024-08-12 02:10:00', 4], - ['2024-08-12 02:23:00', 5], - ['2024-08-12 03:53:00', 6], - ['2024-08-12 05:23:00', 7], - ['2024-08-12 07:33:00', 12], - ['2024-08-12 09:43:00', 6], - ['2024-08-12 11:22:00', 3], - ['2024-08-12 13:26:00', 10], - ['2024-08-12 16:29:00', 11], - ['2024-08-12 20:53:00', 20], - ] - setDmaOptions(entranceList,entranceChart,'| DMA入口水量曲线','流量','( t )') -} -//echart配置 -const setDmaOptions = (dataList,chart,title,toolTitle,axisName) =>{ - let options = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'line' , - lineStyle:{ - color:'#f3eadc', - }, - snap:true, - }, - }, - grid: { - width:'80%', - left:'8%', - bottom: '12%' - }, - dataset: { - source:dataList - }, - xAxis: { - name:'Date', - type: 'time', - axisTick:{ - show:false, - }, - axisLabel:{ - show:false, - }, - axisLine:{ - show:true, - lineStyle:{ - color:'#bdc3c7', - width:1, - }, - }, - }, - yAxis: { - name:axisName, - type: 'value', - boundaryGap:false, - axisLine:{ - show:true, - lineStyle:{ - color:'#bdc3c7', - width:1, - }, - }, - axisLabel:{ - color:'#C8C8C8', - }, - splitLine:{ - show:false, - } - }, - series: [ - { - name: toolTitle, - type: 'line', - symbol: 'none', - itemStyle: { - color: '#47B3FF', - }, - lineStyle:{ - color: '#47B3FF', - width:1, - }, - smooth:true, - encode: { - x: 0, - y: 1 - }, - areaStyle: { - color: new echarts.graphic.LinearGradient( - 0, 0, 0, 1, - [ - {offset: 0, color:'#55A5EB'}, - {offset: 1, color:'#fff'} - ] - ) - } - } - ], - } - chart.clear() - chart.setOption(options,true) -} -//统一请求数据监测数据 -const getListData = async(val) =>{ - getPressureList(val) - getFlowList(val) - getAnalysisList(val) - getLiquidLevelList(val) -} -/** - * 表格上传记录-Table - */ -const loading = ref(false); //加载状态 -const tableData = ref([ - { - "valveName": "6#0094", - "operateCommand": "开阀", - "createUserName": "管理员", - "createTimeView": "2025-01-03 10:50:12" - },{ - "valveName": "6#0094", - "operateCommand": "开阀", - "createUserName": "管理员", - "createTimeView": "2025-01-03 10:50:12" - },{ - "valveName": "6#0094", - "operateCommand": "开阀", - "createUserName": "管理员", - "createTimeView": "2025-01-03 10:50:12" - },{ - "valveName": "6#0094", - "operateCommand": "开阀", - "createUserName": "管理员", - "createTimeView": "2025-01-03 10:50:12" - },{ - "valveName": "6#0094", - "operateCommand": "开阀", - "createUserName": "管理员", - "createTimeView": "2025-01-03 10:50:12" - },{ - "valveName": "6#0094", - "operateCommand": "开阀", - "createUserName": "管理员", - "createTimeView": "2025-01-03 10:50:12" - },,{ - "valveName": "6#0094", - "operateCommand": "开阀", - "createUserName": "管理员", - "createTimeView": "2025-01-03 10:50:12" - },{ - "valveName": "6#0094", - "operateCommand": "开阀", - "createUserName": "管理员", - "createTimeView": "2025-01-03 10:50:12" - },{ - "valveName": "6#0094", - "operateCommand": "开阀", - "createUserName": "管理员", - "createTimeView": "2025-01-03 10:50:12" - }, -]); //管点列表 -let tableHeader = ref({ - // areaCode: '操作方式', - valveName: '操作阀门', - operateCommand: '操作说明', - // userNumber: '灌溉时间', - createUserName:'操作人', - createTimeView:'操作时间', -}) -//获取列表数据 -const getTableList = async() => { - loading.value = true; - let res = await dma().headWaterArea(['1013','1012']) - if(res.code == 200) { - loading.value = false; - tableData.value = res.data - } -} - -const tableData2 = ref([ - { - "sort": 1, - "name": "策略一", - "linkageType": 936, - "linkageCommand": "37cccb", - "taskTimeType": 243, - "taskTimeValue": "每周一", - "taskTime": "2025-01-03 10:50:08", - "status": 897, - "comment": "7f1h1u", - "createTime": 1735872608980, - "updateTime": "2025-01-03 10:50:13", - "isDelete": 373, - "createTimeView": "jpisvy", - "updateTimeView": "82cz1k" - }, { - "sort": 2, - "name": "策略二", - "linkageType": 936, - "linkageCommand": "37cccb", - "taskTimeType": 243, - "taskTimeValue": "每周日", - "taskTime": "2025-01-03 10:50:08", - "status": 897, - "comment": "7f1h1u", - "createTime": 1735872608980, - "updateTime": "2025-01-03 10:50:13", - "isDelete": 373, - "createTimeView": "jpisvy", - "updateTimeView": "82cz1k" - } -]); //管点列表 -let tableHeader2 = ref({ - sort: '序号', - name: '策略名称', - taskTimeValue: '执行周期', - // taskTime: '创建时间', - -}) -//获取列表数据 -const getTableList2 = async() => { - loading.value = true; - let res = await dma().headWaterArea(['1013','1012']) - if(res.code == 200) { - loading.value = false; - tableData2.value = res.data - } -} -watchEffect(() =>{ - if(pressureChart || flowChart || analysisChart || analysisChart){ - setOptions(flowList,flowChart,['1#流量计','2#流量计','3#流量计']) - setOptions(pressureList,pressureChart,['1#压力计','2#压力计','3#压力计']) - setOptions(liquidLevelList,liquidLevelChart,['1#液位计','2#液位计','3#液位计']) - setOptions(flowNightList,analysisChart,['1#流量计','2#流量计','3#流量计'],'( t )') - }else{ - console.log('eChart不存在'); - } -}) -window.addEventListener('resize', function() { - // pressureChart.resize(); - // liquidLevelChart.resize(); - // flowChart.resize(); - // analysisChart.resize(); - // entranceChart.resize(); - -}); -onMounted(async() =>{ - // initCharts() - // getListEntrance() - // await getPointList() - // await getTableList() - // await getTableList2() - // await getListData({type:'1',pointId:pointId.value}) - // await getAlarmData() -}) -//卸载前销毁图表 -const disposeEcharts = (echarts) => { - if (echarts) { - echarts.dispose(); - echarts = null; - } -} -onBeforeUnmount(async ()=> { - // disposeEcharts(pressureChart) - // disposeEcharts(liquidLevelChart) - // disposeEcharts(flowChart) - // disposeEcharts(analysisChart) - // disposeEcharts(entranceChart) -}) - -</script> - -<style lang="scss" scoped> -.dma-container{ - height:100%; - width: 100%; - padding: 50px 15px; - .content{ - display: flex; - align-items: center; - justify-content: space-between; - height: 100%; - width: 100%; - .contbox{ - width: 429px; - height: 100%; - background: url("../../../assets/images/screen/irrigate/leftbox.png") - 100% no-repeat; - background-size: 100% 100%; - position: relative; - z-index: 55; - .table-box{ - height:86%; - width:100%; - - background-repeat: no-repeat; - background-size: 98% 100%; - background-position: center; - padding: 0 2%; - //修改边框和字体 - :deep(.el-table){ - --el-table-border-color:rgba(0,0,0,0); - font-weight: 500; - font-size: 14px; - color: #FFFFFF; - } - //修改头部字体 - :deep(.el-table__header th){ - font-weight: 500; - font-size: 12px; - color: #FFFFFF; - } - /*最外层透明*/ - :deep(.el-table), - :deep(.el-table__expanded-cell){ - background-color: transparent !important; - } - /* 表格内背景颜色 */ - :deep(.el-table th), - :deep(.el-table tr), - :deep(.el-table td){ - background-color: transparent !important; - border-bottom:1px solid #1D627D !important; - } - //:deep(.el-table tr){ - // border:1px solid #000 !important; - //} - /*去除底边框*/ - :deep(.el-table td.el-table__cell){ - border:0; - } - :deep(.el-table th.el-table__cell.is-leaf) { - border: 0; - } - /*去除底部灰条.el-table::before*/ - :deep(.el-table::before) { - display: none; - } - } - } - .titbox{ - - width: 216px; - height: 42px; - font-weight: 400; - font-size: 20px; - color: #FFFFFF; - position: relative; - z-index: 66; - margin-bottom: 40px; - - } - .titbox>img{ - width: 100%; - height: 100%; - margin: 16px; - } - .titbox>span{ - position: absolute; - left: 70px; - top: 20px; - } - .left{ - - - - } - .main{ - width: 991px; - height: 100%; - background: url("../../../assets/images/screen/irrigate/leftbox.png") - 100% no-repeat; - background-size: 100% 100%; - position: relative; - .circle{ - width:253px; - height:253px; - position: absolute; - - bottom: 0; - left: 0; - } - .map{ - height:583px; - width: 966px; - position: relative; - background: url("../../../assets/images/screen/irrigate/mapbg.png") - 100% no-repeat; - background-size: 100% 100%; - margin: 0 auto; - .map-img{ - position: absolute; - top: 273px; - right: 412px; - width:72%; - height:92%; - img{ - width:100%; - height:100%; - } - } - - .map-text1{ - position: absolute; - top:65%; - left:32%; - font-weight: 400; - font-size: 14px; - color: #FFFFFF; - font-style: italic; - } - .map-text2{ - position: absolute; - top:26%; - left:60%; - font-weight: 400; - font-size: 14px; - color: #FFFFFF; - font-style: italic; - } - .map-text3{ - position: absolute; - top: 50.5%; - left: 64.5%; - font-weight: 400; - font-size: 14px; - color: #FFFFFF; - font-style: italic; - } - .map-text4{ - position: absolute; - top:65.5%; - left:55%; - font-weight: 400; - font-size: 14px; - color: #FFFFFF; - font-style: italic; - } - .point{ - width: 24%; - height: 24%; - background-image: url("../../../assets/images/screen/dma/alert.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - padding: 2% 3% 1%; - display: flex; - flex-direction: column; - justify-content: space-evenly; - .point-name{ - width: 100%; - font-weight: 500; - font-size: 18px; - color: #BEF0FF; - } - .point-content{ - width: 100%; - margin-top:1%; - div{ - width: 100%; - display: flex; - justify-content:space-between; - margin-left: 10px; - margin-top:3%; - span:first-child{ - font-weight: 500; - font-size: 16px; - color: #A4ECF5; - // margin-right: 15px; - } - span:last-child{ - font-weight: 500; - font-size: 14px; - color: #FFFFFF; - } - } - } - } - .point-one{ - top:6%; - left: 15%; - position: absolute; - } - .point-two{ - bottom:43%; - left: 9%; - position: absolute; - } - .point-three{ - right:73%; - top: 62%; - position: absolute; - } - img{ - width:48px; - height:80px; - position: absolute; - bottom: calc(50% - 40px); - left: calc(50% - 24px) - } - } - - } - .right{ - - - } - } -} -.img{ - img{ - width: 100%; - height: 100%; - } -} -.clcbox{ - width: 56px; - padding: 2px; - background: rgba(0,211,222,.5); - border: 2px solid rgba(0,211,222,1); - border-radius: 16px; -} -</style> \ No newline at end of file diff --git a/src/views/screen/overView/index.vue b/src/views/screen/overView/index.vue deleted file mode 100644 index 81523f3..0000000 --- a/src/views/screen/overView/index.vue +++ /dev/null @@ -1,1148 +0,0 @@ -<template> - <div class="dma-container"> - <div class="content"> - <div class="left"> - - </div> - <div class="main"> - - </div> - <!-- 右 ------------------------------------------ --> - <div class="right"> - - </div> - </div> - </div> -</template> - -<script setup> -import { getCurrentInstance,onBeforeUnmount,onMounted } from 'vue'; -import dma from "@/api/screen/dma/index"; -import overview from '@/api/screen/overview/index'; -import * as echarts from 'echarts' -import pointApi from "@/api/facility/point.js"; -const { proxy }= getCurrentInstance() -/** - * 地块 - */ - const landMassList = ref([ - { - "code": "6-1", - "name": "6#系统1", - "listArea": [ - "八连" - ], - "landType": "耕地", - "soilType": "沙土", - "vegetationType": "棉花", - "extent": 100, - "sort": 1 - },{ - "code": "6-2", - "name": "6#系统2", - "listArea": [ - "八连" - ], - "landType": "耕地", - "soilType": "沙土", - "vegetationType": "棉花", - "extent": 100, - "sort": 2 - },{ - "code": "6-3", - "name": "6#系统3", - "listArea": [ - "八连" - ], - "landType": "耕地", - "soilType": "沙土", - "vegetationType": "棉花", - "extent": 100, - "sort": 3 - },{ - "code": "7-1", - "name": "7#系统1", - "listArea": [ - "八连" - ], - "landType": "耕地", - "soilType": "沙土", - "vegetationType": "棉花", - "extent": 100, - "sort": 4 - },{ - "code": "7-2", - "name": "7#系统2", - "listArea": [ - "八连" - ], - "landType": "耕地", - "soilType": "沙土", - "vegetationType": "棉花", - "extent": 100, - "sort": 5 - } - ]); - -/** - * 地图取水点 - */ -const pointInfo = ref([ - // {name:'监控点1',liquidLevel:'0',flow:'0.00',pressure:'0.00',class:'point-one point'}, - // {name:'监控点2',liquidLevel:'0',flow:'0.00',pressure:'0.00',class:'point-two point'}, - // {name:'监控点3',liquidLevel:'0',flow:'0.00',pressure:'0.00',class:'point-three point'}, -]) - -/** - * 频率 - */ - -const getPointInfo = async () =>{ - await overview().getDataOverview().then((res) => { - res.data.forEach((item,index1)=> { - pointInfo.value[index1].name = item.pointName - item.dataList.forEach((item) => { - //液位 - // if(item.columnsCode === '1001'){ - // pointInfo.value[index1].liquidLevel = item.columnsValue - // } - //流量 - if(item.columnsCode === '1011'){ - pointInfo.value[index1].flow = item.columnsValue - } - //压力 - if(item.columnsCode === '1002'){ - pointInfo.value[index1].pressure = item.columnsValue - } - }) - }) - }) - pointInfo.value.forEach((item) =>{ - item.flow = Number(item.flow).toFixed(2) - item.pressure = Number(item.pressure).toFixed(2) - }) -} -//getPointInfo() -/** - * Echarts 图表 - */ -let pressureChart -let liquidLevelChart -let flowChart -let analysisChart -let entranceChart -//初始化Echarts -let initCharts = () =>{ - pressureChart = echarts.init(document.getElementById('pressure')); - liquidLevelChart = echarts.init(document.getElementById('liquidLevel')); - flowChart = echarts.init(document.getElementById('flow')); - analysisChart = echarts.init(document.getElementById('analysis')); - entranceChart = echarts.init(document.getElementById('entrance')); -} -let loadingEcharts = { - text: 'loading', - textColor: 'rgba(105,133,219, 1)', - maskColor: 'rgba(202, 224, 252, 0.2)', - fontSize: '20px', -} -/** - * 搜索 - */ -const pointList = ref([]) -const pointId = ref(); -const getPointList = async() =>{ - - //区域列表 - let res = await pointApi().search({limit: 10000, page: 1}) - if(res.code == 200){ - pointList.value = res.data.list - pointId.value = pointList.value[0].id - console.log("获取监控点数据",pointList.value); - }else{ - proxy.$modal.msgError('获取数据失败,请刷新再试!') - } -} -//选中数据 -const searchPoint = () =>{ - getListData({type:'1',pointId:pointId.value}) -} -//报警相关 -const alarmList = ref([ - {description:'6#泵房液位过低',createTimeView:'2025-01-01 15:12:36'}, - {description:'7#泵房液位过低',createTimeView:'2025-01-01 15:13:36'}, - {description:'6#泵房压力异常',createTimeView:'2025-01-01 15:12:36'} -]) -async function getAlarmData(){ - await dma().alarm({limit:10000,page:1}).then((res) =>{ - alarmList.value = res.data.list - }) -} - -//获取液位监测数据 -let liquidLevelList = [[],[],[]] -const getLiquidLevelList = async(val) =>{ - liquidLevelChart.showLoading(loadingEcharts) - val.columnsCodeList = ['1001'] - let res = await dma().searchMonitor(val) - liquidLevelChart.hideLoading() - liquidLevelList = [[],[],[]] - if(res.code == 200){ - res.data.forEach((item) =>{ - if(item.facilityCode === 'YWJ001' || item.facilityCode === 'YWJ002' || item.facilityCode === 'YWJ003'){ - liquidLevelList[0].push([item.uploadTimeView,Number(item.columnsValue)]) - } - if(item.facilityCode === 'YWJ004' || item.facilityCode === 'YWJ005' || item.facilityCode === 'YWJ006'){ - liquidLevelList[1].push([item.uploadTimeView,Number(item.columnsValue)]) - } - // if(item.facilityName === '3#液位计'){ - // liquidLevelList[2].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - }) - }else{ - // proxy.$modal.msgError('暂无液位数据') - } - setOptions(liquidLevelList,liquidLevelChart,['1#液位计','高位水池液位','3#液位计'],'( m3/h )') - console.log('pre-get',liquidLevelList); -} -//获取压力监测数据 -let pressureList = [[],[],[]] -const getPressureList = async(val) =>{ - pressureChart.showLoading(loadingEcharts) - val.columnsCodeList = ['1002'] - let res = await dma().searchMonitor(val) - pressureChart.hideLoading() - pressureList = [[],[],[]] - if(res.code == 200){ - res.data.forEach((item) =>{ - if(item.facilityCode === '000243617545' || item.facilityCode === '000243617546' || item.facilityCode === '000243617547'){ - pressureList[0].push([item.uploadTimeView,Number(item.columnsValue)]) - } - // if(item.facilityName === '压力计2'){ - // pressureList[1].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - // if(item.facilityName === '压力计3'){ - // pressureList[2].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - }) - }else{ - // proxy.$modal.msgError('获取列表失败,请刷新重试!') - } - setOptions(pressureList,pressureChart,['1#压力计','2#压力计','3#压力计'],'( Mpa )') - console.log('pre-get',pressureList); -} -//获取流量监测数据 -let flowList = [[],[],[]] -const getFlowList = async(val) =>{ - flowChart.showLoading(loadingEcharts) - val.columnsCodeList = ['1012'] - let res = await dma().searchMonitor(val) - flowChart.hideLoading() - flowList = [[],[],[]] - if(res.code == 200){ - res.data.forEach((item,index) =>{ - if(item.facilityCode === 'LLJ001' || item.facilityCode === 'LLJ002' || item.facilityCode === 'LLJ003'){ - flowList[0].push([item.uploadTimeView,Number(item.columnsValue)]) - } - // if(item.facilityName === '2#流量计'){ - // flowList[1].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - // if(item.facilityName === '3#流量计'){ - // flowList[2].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - // data.push([item.uploadTimeView,Number(item.columnsValue)]) - }) - }else{ - proxy.$modal.msgError('获取列表失败,请刷新重试!') - } - console.log('flowList',flowList) - setOptions(flowList,flowChart,['1#流量计','2#流量计','3#流量计'],'( t )') -} - -//获取夜间流量监测数据 -let flowNightList = [[],[],[]] -const getAnalysisList = async(val) =>{ - analysisChart.showLoading(loadingEcharts) - val.columnsCodeList = ['1012'] - let res = await dma().searchStatistic(val) - analysisChart.hideLoading() - flowNightList = [[],[],[]] - if(res.code == 200){ - res.data.forEach((item,index) =>{ - if(item.facilityCode === 'LLJ001' || item.facilityCode === 'LLJ002' || item.facilityCode === 'LLJ003'){ - flowNightList[0].push([item.uploadTimeView,Number(item.columnsValue)]) - } - // if(item.facilityName === '2#流量计'){ - // flowNightList[1].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - // if(item.facilityName === '3#流量计'){ - // flowNightList[2].push([item.uploadTimeView,Number(item.columnsValue)]) - // } - }) - }else{ - proxy.$modal.msgError('获取列表失败,请刷新重试!') - } - console.log('flowNightList',flowNightList) - setOptions(flowNightList,analysisChart,['1#流量计','2#流量计','3#流量计'],'( t )') -} -/** - * echart配置 - * - */ -const setOptions = (datalist,echart,title,yAxisTitle) =>{ - let options = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'line' , - lineStyle:{ - color:'#f3eadc', - }, - snap:true, - }, - }, - grid:{ - width:'80%', - left:'8%', - bottom: '12%' - }, - xAxis: { - name:'Date', - type: 'time',//横坐标设为时间,根据data当日时间自动对应,data横坐标为时间格式 - axisTick:{ - show:false, - }, - axisLabel:{ - show:false, - }, - axisLine:{ - show:true, - lineStyle:{ - color:'#bdc3c7', - width:1, - }, - }, - }, - yAxis: { - name:yAxisTitle, - type: 'value', - boundaryGap:false, - axisLine:{ - show:true, - lineStyle:{ - color:'#bdc3c7', - width:1, - }, - }, - axisLabel:{ - color:'#C8C8C8', - }, - splitLine:{ - show:false, - } - }, - series: [ - { - name: title[0], - type: 'line', - symbol: 'none', - data:datalist[0], - itemStyle: { - color: '#1459a8', - }, - lineStyle:{ - color: '#1459a8', - width:1, - }, - - labelLine:{ - show:false, - }, - smooth:true, - areaStyle: { - color: new echarts.graphic.LinearGradient( - 0, 0, 0, 1, - [ - {offset: 0, color:'#1459a8'}, - {offset: 1, color:'#7cb2f1'} - ] - ) - } - }, - { - name: title[1], - type: 'line', - symbol: 'none', - data:datalist[1], - itemStyle: { - color: '#12835c', - }, - lineStyle:{ - color: '#12835c', - width:1, - }, - smooth:true, - areaStyle: { - color: new echarts.graphic.LinearGradient( - 0, 0, 0, 1, - [ - {offset: 0, color:'#12835c'}, - {offset: 1, color:'#ace4d1'} - ] - ) - } - }, - { - name: title[2], - type: 'line', - symbol: 'none', - data:datalist[2], - itemStyle: { - color: '#04748c', - }, - lineStyle:{ - color: '#04748c', - width:1, - }, - smooth:true, - areaStyle: { - color: new echarts.graphic.LinearGradient( - 0, 0, 0, 1, - [ - {offset: 0, color:'#04748c'}, - {offset: 1, color:'#7fd8ec'} - ] - ) - } - } - ], - } - echart.clear() - echart.setOption(options,true) -} -//压力曲线 -const getListPressure = () =>{ - const pressureList = [ - ['2024-08-12 02:10:00', 4], - ['2024-08-12 02:23:00', 5], - ['2024-08-12 03:53:00', 6], - ['2024-08-12 05:23:00', 7], - ['2024-08-12 07:33:00', 12], - ['2024-08-12 09:43:00', 6], - ['2024-08-12 11:22:00', 3], - ['2024-08-12 13:26:00', 10], - ['2024-08-12 16:29:00', 11], - ['2024-08-12 20:53:00', 20], - ] - setDmaOptions(pressureList,pressureChart,'| 压力曲线','压力','( MPa)') -} -//流量曲线 -const getListEntrance = () =>{ - const entranceList = [ - ['2024-08-12 02:10:00', 4], - ['2024-08-12 02:23:00', 5], - ['2024-08-12 03:53:00', 6], - ['2024-08-12 05:23:00', 7], - ['2024-08-12 07:33:00', 12], - ['2024-08-12 09:43:00', 6], - ['2024-08-12 11:22:00', 3], - ['2024-08-12 13:26:00', 10], - ['2024-08-12 16:29:00', 11], - ['2024-08-12 20:53:00', 20], - ] - setDmaOptions(entranceList,entranceChart,'|流量曲线','流量','( m³)') -} -//水位曲线 -const getListAnalysis = () =>{ - const analysisList = [ - ['2024-08-12 02:10:00', 4], - ['2024-08-12 02:23:00', 5], - ['2024-08-12 03:53:00', 6], - ['2024-08-12 05:23:00', 7], - ['2024-08-12 07:33:00', 12], - ['2024-08-12 09:43:00', 6], - ['2024-08-12 11:22:00', 3], - ['2024-08-12 13:26:00', 10], - ['2024-08-12 16:29:00', 11], - ['2024-08-12 20:53:00', 20], - ] - setDmaOptions(analysisList,analysisChart,'| 水位曲线','水位','( m)') -} -//频率折线 -const getListFlow = () =>{ - - setDmaOptions2(flowChart) -} -//设备饼图 -const getListLiquidLevel = () =>{ - - setDmaOptions3(liquidLevelChart) -} -//echart配置 -const setDmaOptions = (dataList,chart,title,toolTitle,axisName) =>{ - let options = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'line' , - lineStyle:{ - color:'#f3eadc', - }, - snap:true, - }, - }, - grid: { - width:'80%', - left:'8%', - bottom: '12%' - }, - dataset: { - source:dataList - }, - xAxis: { - name:'Date', - type: 'time', - axisTick:{ - show:false, - }, - axisLabel:{ - show:false, - }, - axisLine:{ - show:true, - lineStyle:{ - color:'#bdc3c7', - width:1, - }, - }, - }, - yAxis: { - name:axisName, - type: 'value', - boundaryGap:false, - axisLine:{ - show:true, - lineStyle:{ - color:'#bdc3c7', - width:1, - }, - }, - axisLabel:{ - color:'#C8C8C8', - }, - splitLine:{ - show:false, - } - }, - series: [ - { - name: toolTitle, - type: 'line', - symbol: 'none', - itemStyle: { - color: '#47B3FF', - }, - lineStyle:{ - color: '#47B3FF', - width:1, - }, - smooth:true, - encode: { - x: 0, - y: 1 - }, - areaStyle: { - color: new echarts.graphic.LinearGradient( - 0, 0, 0, 1, - [ - {offset: 0, color:'#55A5EB'}, - {offset: 1, color:'#fff'} - ] - ) - } - } - ], - } - chart.clear() - chart.setOption(options,true) -} - -//echart 折线配置 -const setDmaOptions2 = (chart) =>{ - - let options = { - - tooltip: { - trigger: 'axis', - splitLine:false - }, - - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, -// toolbox: { -// feature: { -// saveAsImage: {} -// } -// }, - xAxis: { - type: 'category', - splitLine: { - show:false - }, - - boundaryGap: false, - data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] - }, - yAxis: { - type: 'value', - splitLine: { - show:false - }, - - }, - series: [ - { - name: '6#1', - type: 'line', - smooth: true, - data: [0, 1, 1.2, 1.2,1.5, 15,1.3] - }, - { - name: '6#2', - type: 'line', - stack: 'Total', - smooth: true, - data: [1, 1.5, 1.1, 2.4, 2.0, 1.5, 2.1] - }, - { - name: '6#3', - type: 'line', - stack: 'Total', - smooth: true, - data: [1.5, 2.2, 2.1, 1.4, 1.6, 1.6, 2.3] - }, - { - name: '7#1t', - type: 'line', - stack: 'Total', - smooth: true, - data: [0.5, 1.6, 0.9, 0.7, 0.5, 1.6, 1.2] - }, - { - name: '7#2', - type: 'line', - stack: 'Total', - smooth: true, - data: [1.2, 1.6, 1.6, 0.9, 2.1, 0.3, 1.6] - } - ] -}; - chart.clear() - chart.setOption(options,true) -} -//echart 饼图配置 -const setDmaOptions3 = (chart) =>{ - - let options = { - - series: [ - { - name: 'Nightingale Chart', - type: 'pie', - radius: [50, 90], - center: ['50%', '50%'], - roseType: 'area', - itemStyle: { - borderRadius: 8 - }, - data: [ - - { value: 38, name: '离线' }, - { value: 24, name: '在线' } - ] - } - ] - }; - chart.clear() - chart.setOption(options,true) -} -//统一请求数据监测数据 -const getListData = async(val) =>{ - getPressureList(val) - getFlowList(val) - getAnalysisList(val) - getLiquidLevelList(val) -} -/** - * 表格上传记录-Table - */ -const loading = ref(false); //加载状态 -const tableData = ref([]); //管点列表 -let tableHeader = ref({ - sort:'序号', - code: '地块编号', - name: '地块名称', - listArea: '所属区域', - landType:'土地类型', - soilType:'土壤类型', - vegetationType:'种植作物', - extent:'面积', -}) -//获取列表数据 -const getTableList = async() => { - loading.value = true; - let res = await dma().headWaterArea(['1013','1012']) - if(res.code == 200) { - loading.value = false; - tableData.value = res.data - } -} -watchEffect(() =>{ - if(pressureChart || flowChart || analysisChart || analysisChart){ - setOptions(flowList,flowChart,['1#流量计','2#流量计','3#流量计']) - setOptions(pressureList,pressureChart,['1#压力计','2#压力计','3#压力计']) - setOptions(liquidLevelList,liquidLevelChart,['1#液位计','2#液位计','3#液位计']) - setOptions(flowNightList,analysisChart,['1#流量计','2#流量计','3#流量计'],'( t )') - }else{ - console.log('eChart不存在'); - } -}) -window.addEventListener('resize', function() { - pressureChart.resize(); - liquidLevelChart.resize(); - flowChart.resize(); - analysisChart.resize(); - entranceChart.resize(); - -}); -onMounted(async() =>{ - initCharts() - getListEntrance() - getListPressure() - getListAnalysis() - getListFlow() - getListLiquidLevel() - - await getPointList() - await getTableList() - // await getListData({type:'1',pointId:pointId.value}) - // await getAlarmData() -}) -//卸载前销毁图表 -const disposeEcharts = (echarts) => { - if (echarts) { - echarts.dispose(); - echarts = null; - } -} -onBeforeUnmount(async ()=> { - disposeEcharts(pressureChart) - disposeEcharts(liquidLevelChart) - disposeEcharts(flowChart) - disposeEcharts(analysisChart) - disposeEcharts(entranceChart) -}) - -</script> - -<style lang="scss" scoped> -.dma-container{ - height:100%; - width: 100%; - padding: 0.5%; - .content{ - display: flex; - flex-wrap: nowrap; - height: 100%; - width: 100%; - .left{ - width: 26.4%; - height:100%; - display: flex; - justify-content: space-between; - flex-direction: column; - .echarts-box{ - width: 100%; - height: 33%; - // background-image: url("../../../assets/images/screen/dma/box.png"); - // background-repeat: no-repeat; - // background-size: 100% 100%; - .echarts-title{ - width: 100%; - height: 16.5%; - // background-image: url("../../../assets/images/screen/dma/icon1.png"); - // background-repeat: no-repeat; - // background-position: 4% 50%; - font-weight: 500; - font-size: 18px; - color: #FFFFFF; - padding-left:8%; - padding-top:2.5%; - - } - #pressure{ - width: 100%; - height: 83.5%; - } - #analysis{ - width: 100%; - height: 83.5%; - } - #entrance{ - width: 100%; - height: 83.5%; - } - } - - } - .main{ - width:47%; - height:100%; - margin: 0 auto; - display: flex; - flex-direction: column; - justify-content: space-between; - .map{ - width: 100%; - height:560px; - - position: relative; - background-image: url("../../../assets/images/screen/overview/maplot.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - .map-img{ - // position: absolute; - // top: 112px; - // right: 416px; - width:100%; - height:100%; - img{ - width:100%; - height:100%; - } - } - .circle{ - width:75px; - height:113px; - position: absolute; - background-image: url("../../../assets/images/screen/dma/mini-circle.png"); - background-repeat: no-repeat; - top: 1%; - right: 1%; - } - .map-text1{ - position: absolute; - top:65%; - left:32%; - font-weight: 400; - font-size: 14px; - color: #FFFFFF; - font-style: italic; - } - .map-text2{ - position: absolute; - top:26%; - left:60%; - font-weight: 400; - font-size: 14px; - color: #FFFFFF; - font-style: italic; - } - .map-text3{ - position: absolute; - top: 50.5%; - left: 64.5%; - font-weight: 400; - font-size: 14px; - color: #FFFFFF; - font-style: italic; - } - .map-text4{ - position: absolute; - top:65.5%; - left:55%; - font-weight: 400; - font-size: 14px; - color: #FFFFFF; - font-style: italic; - } - .point{ - width: 24%; - height: 24%; - background-image: url("../../../assets/images/screen/dma/alert.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - padding: 2% 3% 1%; - display: flex; - flex-direction: column; - justify-content: space-evenly; - .point-name{ - width: 100%; - font-weight: 500; - font-size: 18px; - color: #BEF0FF; - } - .point-content{ - width: 100%; - margin-top:1%; - div{ - width: 100%; - display: flex; - justify-content:space-between; - margin-left: 10px; - margin-top:3%; - span:first-child{ - font-weight: 500; - font-size: 16px; - color: #A4ECF5; - // margin-right: 15px; - } - span:last-child{ - font-weight: 500; - font-size: 14px; - color: #FFFFFF; - } - } - } - } - .point-one{ - top:6%; - left: 15%; - position: absolute; - } - .point-two{ - bottom:43%; - left: 9%; - position: absolute; - } - .point-three{ - right:73%; - top: 62%; - position: absolute; - } - img{ - width:48px; - height:80px; - position: absolute; - // bottom: calc(50% - 40px); - // left: calc(50% - 24px) - } - } - .table-box{ - height:33%; - width:100%; - background-image: url("../../../assets/images/screen/dma/table-box.png"); - background-repeat: no-repeat; - background-size: 98% 100%; - background-position: center; - padding: 0 2%; - //修改边框和字体 - :deep(.el-table){ - --el-table-border-color:rgba(0,0,0,0); - font-weight: 500; - font-size: 14px; - color: #FFFFFF; - } - //修改头部字体 - :deep(.el-table__header th){ - font-weight: 500; - font-size: 12px; - color: #FFFFFF; - } - /*最外层透明*/ - :deep(.el-table), - :deep(.el-table__expanded-cell){ - background-color: transparent !important; - } - /* 表格内背景颜色 */ - :deep(.el-table th), - :deep(.el-table tr), - :deep(.el-table td){ - background-color: transparent !important; - border-bottom:1px solid #1D627D !important; - } - //:deep(.el-table tr){ - // border:1px solid #000 !important; - //} - /*去除底边框*/ - :deep(.el-table td.el-table__cell){ - border:0; - } - :deep(.el-table th.el-table__cell.is-leaf) { - border: 0; - } - /*去除底部灰条.el-table::before*/ - :deep(.el-table::before) { - display: none; - } - } - } - .right{ - width: 26.4%; - height:100%; - display: flex; - justify-content: space-between; - flex-direction: column; - .search{ - width: 100%; - height:4%; - display: flex; - align-items: center; - justify-content: flex-start; - .search-select{ - height:100%; - width: 80%; - :deep(.el-select__wrapper){ - height: 100%; - width: 100%; - background:transparent !important; - border: 1px solid #1fb0be !important; - border-radius: 5px 0 0 5px; - } - } - .search-btn{ - height:100%; - width: 20%; - border-radius:0 5px 5px 0; - background: #2a6bb6; - border-bottom: 1px solid #03e9ff !important; - border-top: 1px solid #03e9ff !important; - border-right: 1px solid #03e9ff !important; - font-weight: 400; - font-size: 18px; - color: #B9F9FF; - } - } - #alarm{ - width: 100%; - height: 27.5%; - // background-image: url("../../../assets/images/screen/dma/box.png"); - // background-repeat: no-repeat; - // background-size: 100% 100%; - .alarm-title{ - padding-left:15px; - height:18%; - display: flex; - justify-content: flex-start; - align-items: center; - div{ - display: flex; - align-items: center; - height: 100%; - margin-left: 10px; - font-weight: 500; - font-size: 18px; - color: #FFFFFF; - } - } - .alarm-more{ - height:14%; - font-weight: 500; - font-size:20px; - color: #559AE8; - // color: #25D9B9; - margin-left:12%; - } - .alarm-content{ - height:68%; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items:flex-start; - padding: 3% 6%; - // background-color: #03e9ff; - overflow: hidden; - .alarm-item{ - width: 100%; - height:20%; - display: flex; - justify-content: space-around; - align-items: center; - padding: 16px 0; - .item-point{ - width:10px; - height:10px; - border-radius: 50%; - background-color: #49CBCB; - } - .item-text{ - width:60%; - font-weight: 500; - font-size: 15px; - //color: #25D9B9; - color: #559AE8; - } - .item-date{ - font-weight: 500; - font-size: 13px; - // color: #559AE8; - color: #25D9B9; - } - } - } - } - .echarts-box{ - width: 100%; - height: 33%; - // background-image: url("../../../assets/images/screen/dma/box.png"); - // background-repeat: no-repeat; - // background-size: 100% 100%; - .echarts-title { - width: 100%; - height: 16.5%; - background-image: url("../../../assets/images/screen/dma/icon1.png"); - background-repeat: no-repeat; - background-position: 4% 50%; - font-weight: 500; - font-size: 18px; - color: #FFFFFF; - padding-left:8%; - padding-top:2.5%; - } - #liquidLevel{ - width: 100%; - height: 83.5%; - } - #flow{ - width: 100%; - height: 83.5%; - } - } - } - } -} -.img{ - img{ - width: 100%; - height: 100%; - } -} -.titbox{ - - width: 216px; - height: 42px; - font-weight: 400; - font-size: 20px; - color: #FFFFFF; - position: relative; - z-index: 66; - margin-bottom: 40px; - -} -.titbox>img{ - width: 100%; - height: 100%; - margin: 16px; -} -.titbox>span{ - position: absolute; - left: 70px; - top: 20px; -} -.el-table:last-child(){ - border: none !important; -} -</style> \ No newline at end of file diff --git a/src/views/screen/pump/index.vue b/src/views/screen/pump/index.vue deleted file mode 100644 index 80be624..0000000 --- a/src/views/screen/pump/index.vue +++ /dev/null @@ -1,692 +0,0 @@ -<template> - <div class="pump-container"> - <div class="content"> - <div v-for="(item,index) in pumpList" :key="index" class="item"> - <div class="item-title">{{index+6}}号{{item.title}}</div> - <div class="item-up"> - <!-- <div class="item-up-img"></div> - <div class="item-up-img"></div> - <div class="item-up-img"></div> - <div class="item-up-img"></div> --> - <video - ref="videoRef" - :src="videoUrl" - width="160" - height="120" - autoplay - controls - @timeupdate="handleTimeUpdate" - ></video> - <video - ref="videoRef" - :src="videoUrl" - width="160" - height="120" - autoplay - controls - @timeupdate="handleTimeUpdate" - ></video> - <video - ref="videoRef" - :src="videoUrl" - width="160" - height="120" - autoplay - controls - @timeupdate="handleTimeUpdate" - ></video> - <video - ref="videoRef" - :src="videoUrl" - width="160" - height="120" - autoplay - controls - @timeupdate="handleTimeUpdate" - ></video> - <!-- - src: 视频路径 - width: 视频宽度 - height: 视频高度 - autoplay: 是否自动播放 - controls: 是否显示控制条 - @timeupdate: 视频播放时触发(获取视频播放的时间) - --> - - </div> - <div class="item-center"> - <div v-for="(centerItem,index01) in item.facilityList" :key="index01" class="center-item"> - <img :src="centerItem.img" alt=""> - <div class="center-value"> - <span :style="{color:centerItem.color}">{{centerItem.value}}</span> - <span>{{centerItem.unit}}</span> - </div> - <div class="center-name">{{centerItem.label}}</div> - </div> - </div> - - <div class="item-bottom"> - <div class="bottom-item-info"> - <img src="../../../assets/images/screen/pump/bottom-bg.png" alt=""> - <div class="info-title" >{{ item.pList.info1.infoTitle}}</div> - <div class="info-status"> - <div v-if="item.pList.info1.infoHandel == 0" class="status-text">运行中</div> - <div v-else class="status-text">已停止</div> - </div> - <div class="info-btn"> - <!-- 远程控制+手动:显示开关阀 --> - <!-- 就地控制、远程控制+自动:不显示开关阀 --> - <el-button class="handel-btn" v-if="item.pList.info1.infoHandel == 1 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info1.infoHandel,index,item.pList.info1.order)">开泵</el-button> - <el-button class="handel-btn" v-if="item.pList.info1.infoHandel == 0 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info1.infoHandel,index,item.pList.info1.order)">关泵</el-button> - </div> - </div> - <div class="bottom-item-info"> - <img src="../../../assets/images/screen/pump/bottom-bg.png" alt=""> - <div class="info-title">{{ item.pList.info2.infoTitle}}</div> - <div class="info-status"> - <div v-if="item.pList.info2.infoHandel == 0" class="status-text">运行中</div> - <div v-else class="status-text">已停止</div> - </div> - <div class="info-btn"> - <el-button class="handel-btn" v-if="item.pList.info2.infoHandel == 1 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info1.infoHandel,index,item.pList.info2.order)">开泵</el-button> - <el-button class="handel-btn" v-if="item.pList.info2.infoHandel == 0 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info1.infoHandel,index,item.pList.info2.order)">关泵</el-button> - </div> - </div> - <div class="bottom-item-info" v-if="item.pList.info3.infoTitle"> - <img src="../../../assets/images/screen/pump/bottom-bg.png" alt=""> - <div class="info-title">{{ item.pList.info3.infoTitle}}</div> - <div class="info-status"> - <div v-if="item.pList.info3.infoHandel == 0" class="status-text">运行中</div> - <div v-else class="status-text">已停止</div> - </div> - <div class="info-btn"> - <el-button class="handel-btn" v-if="item.pList.info3.infoHandel == 1 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info3.infoHandel,index,item.pList.info3.order)">开泵</el-button> - <el-button class="handel-btn" v-if="item.pList.info3.infoHandel == 0 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info3.infoHandel,index,item.pList.info3.order)">关泵</el-button> - </div> - </div> - </div> - </div> - </div> - </div> -</template> -<script setup> -import { onMounted } from "vue"; - -import flowImg from "../../../assets/images/screen/pump/flow.png"; -import liquidImg from "../../../assets/images/screen/pump/liquid.png"; -import pressure from "../../../assets/images/screen/pump/pressure.png"; -import pumpStatus from "../../../assets/images/screen/pump/status.png"; - -import pump from '../../../api/screen/pupm/index' -import overview from '@/api/screen/overview/index'; -const {proxy} = getCurrentInstance(); -const videoUrl="https://113.250.189.120:4012/rtp/65432500541119000103_65432500541329000107.live.mp4" -const pumpBaseData = - { - title: '泵房', - pointId:null, - img: '', - isAuto:2, - remode:false, - facilityList: [ - {label: '当前模式', value: '就地模式', unit: '', color: '#FCCE4A', img: pumpStatus}, - {label: '流速', value: '0.00', unit: 'm3/h', color: '#2CFFB1', img: flowImg}, - {label: '管网压力', value: '0.00', unit: 'MPa', color: '#1CFBFF', img: pressure}, - {label: '当前液位', value: '0.00', unit: 'm', color: '#FCCE4A', img: liquidImg}, - ], - pList: { - info1:{ - order:1, - infoTitle:'', - infoHandel:1,//开关阀状态,1:关阀状态,0:开阀状态 - vdata:[ - {name: 'A相电流', value: '0.00', unit: 'A' }, - {name: 'A相电压', value: '0.00', unit: 'V' }, - {name: 'B相电流', value: '0.00', unit: 'A' }, - {name: 'B相电压', value: '0.00', unit: 'V' }, - {name: 'C相电流', value: '0.00', unit: 'A' }, - {name: 'C相电压', value: '0.00', unit: 'V' } - ] - }, - info2:{ - order:2, - infoTitle:'', - infoHandel:1, - vdata:[ - {name: 'A相电流', value: '0.00', unit: 'A' }, - {name: 'A相电压', value: '0.00', unit: 'V' }, - {name: 'B相电流', value: '0.00', unit: 'A' }, - {name: 'B相电压', value: '0.00', unit: 'V' }, - {name: 'C相电流', value: '0.00', unit: 'A' }, - {name: 'C相电压', value: '0.00', unit: 'V' } - ] - }, - info3:{ - order:3, - infoTitle:'', - infoHandel:1, - } - } - } -const pumpList = ref([]) -function setPumpData(){ - pumpList.value = [] - pumpList.value[0] = JSON.parse(JSON.stringify(pumpBaseData)) - pumpList.value[1] = JSON.parse(JSON.stringify(pumpBaseData)) - // pumpList.value[2] = JSON.parse(JSON.stringify(pumpBaseData)) - - pumpList.value.forEach((item,index) =>{ - if(index === 0){ - item.pList.info1.infoTitle = "1#泵" - item.pList.info2.infoTitle ="2#泵" - item.pList.info3.infoTitle = "3#泵" - }else if(index === 1){ - item.pList.info1.infoTitle ="1#泵" - item.pList.info2.infoTitle ="2#泵" - } - }) -} -async function getPumpList(){ - - await pump().getPumpData().then((res) =>{ - - res.data.forEach((item,index) =>{ - if(item.pointCode === 'JKD001'){ - pumpList.value[0].remode = item.remode - pumpList.value[0].remode = pumpList.value[0].remode == 'true' ? true : false - - pumpList.value[0].isAuto = item.pattern - pumpList.value[0].pList.info1.infoHandel = item.B001 - pumpList.value[0].pList.info2.infoHandel = item.B002 - pumpList.value[0].pointId = item.pointId - pumpList.value[0].title = item.pointName - - }else if(item.pointCode === 'JKD002'){ - pumpList.value[1].remode = item.remode - pumpList.value[1].remode = pumpList.value[1].remode == 'true' ? true : false - - pumpList.value[1].isAuto = item.pattern - pumpList.value[1].pList.info1.infoHandel = item.B003 - pumpList.value[1].pList.info2.infoHandel = item.B004 - pumpList.value[1].pList.info3.infoHandel = item.B007 - pumpList.value[1].pointId = item.pointId - pumpList.value[1].title = item.pointName - - }else if(item.pointCode === 'JKD003'){ - pumpList.value[2].remode = item.remode - pumpList.value[2].remode = pumpList.value[2].remode == 'true' ? true : false - - pumpList.value[2].isAuto = item.pattern - pumpList.value[2].pList.info1.infoHandel = item.B005 - pumpList.value[2].pList.info2.infoHandel = item.B006 - pumpList.value[2].pointId = item.pointId - pumpList.value[2].title = item.pointName - } - }) - console.log('pumpList.value',pumpList.value) - }) - -} -// 获取流量、压力、液位数据 -const getData = async()=>{ - await overview().getDataOverview().then((res) =>{ - - function setData(item,index1){ - - if(item.columnsCode === '1011'){ - pumpList.value[index1].facilityList[0].value = item.columnsValue - } - if(item.columnsCode === '1002'){ - pumpList.value[index1].facilityList[1].value = item.columnsValue - } - if(item.columnsCode === '1001'&&(item.facilityCode === 'YWJ001' || item.facilityCode === 'YWJ002' || item.facilityCode === 'YWJ003')){ - pumpList.value[index1].facilityList[2].value = item.columnsValue - - if(index1 == 0){ - pumpList.value[index1].facilityList[2].label = '水源点液位' - }else if(index1 == 1){ - pumpList.value[index1].facilityList[2].label = '水厂液位' - }else if(index1 == 2){ - pumpList.value[index1].facilityList[2].label = '水厂液位' - } - } - if(item.columnsCode === '1001'&& (item.facilityCode === 'YWJ004' || item.facilityCode === 'YWJ005' || item.facilityCode === 'YWJ006')){ - pumpList.value[index1].facilityList[3].value = item.columnsValue - pumpList.value[index1].facilityList[3].label = '当前液位' - } - } - if(res.data){ - res.data.forEach((item,index1)=>{ - - if( item.pointCode === 'JKD001'){ - // console.log(1,item.pointName) - item.dataList.forEach((item1)=>{ - setData(item1,0) - }) - - }else if(item.pointCode === 'JKD002'){ - // console.log(2,item.pointName) - item.dataList.forEach((item1)=>{ - setData(item1,1) - }) - - }else if(item.pointCode === 'JKD003'){ - // console.log(3,item.pointName,item.dataList) - item.dataList.forEach((item1)=>{ - setData(item1,2) - }) - } - }) - } - }) - pumpList.value.forEach((item) =>{ - item.facilityList.forEach((chidItem1) =>{ - chidItem1.value = Number(chidItem1.value).toFixed(2) - }) - }) -} - -//控制当前模式 -const handelModel = (isAuto,id,num) =>{ - if(isAuto == 2 && num === 2){ - console.log('点击无效') - }else if(isAuto == 1 && num == 1){ - console.log('点击无效') - }else{ - let text = '' - let status = null - if(isAuto == 2){ - text = '确认切换为手动控制模式?' - status = 1 - }else{ - text = '确认切换为自动控制模式?' - status = 2 - } - proxy.$modal.confirm(text).then(async function () { - await pump().handelPumpStatus({pointId:id,status:status}) - }).then(async() => { - proxy.$modal.msgSuccess("操作成功"); - await getPumpList() - }).catch(() => { - proxy.$modal.msg("取消操作"); - }); - } -} -//开关泵 -const handelPump = (val,index,order) =>{ - console.log('val',val,index,order) - - //控制不能同时开两个泵,同一个泵房中,一个开启,另一个就不能开启 - let pump1 = order == 1 && (pumpList.value[index].pList.info1.infoHandel == 0) && val == 1 - let pump2 = order == 2 && (pumpList.value[index].pList.info2.infoHandel == 0) && val == 1 - let pump3 = order == 3 && (pumpList.value[index].pList.info3.infoHandel == 0) && val == 1 - console.log('pump1',pump1,pump2) - if(pump1 || pump2){ - proxy.$modal.confirm('不能同时开泵!') - }else{ - - let text = '' - if(val == 1) { - text = '确认开阀?' - }else if(val == 0){ - text = '确认关阀?' - } - proxy.$modal.confirm(text).then(async function () { - let dataEnd - switch(val){ - case 1: - dataEnd = "_start"; - break; - case 0: - dataEnd = "_stop"; - break; - } - - let dataPre - if(index == 0 && order == 1){ - dataPre = 'B001' - }else if(index == 0 && order == 2){ - dataPre = 'B002' - }else if(index == 1 && order == 1){ - dataPre = 'B003' - }else if(index == 1 && order == 2){ - dataPre = 'B004' - }else if(index == 2 && order == 1){ - dataPre = 'B005' - }else if(index == 2 && order == 2){ - dataPre = 'B006' - }else if(index == 1 && order == 3){ - dataPre = 'B007' - } - - - let dataObj = dataPre + dataEnd - - await pump().handelPump({data:dataObj}).then( async(res) =>{ - if(res.code == 200){ - proxy.$modal.msgSuccess("操作成功,等待设备响应!"); - await getPumpList() - } - }) - }) - // .then(async() => { - // }) - } -} - -let requestTimer1 = ref() -let requestTimer2 = ref() - -onMounted(async() =>{ - setPumpData() - await getPumpList() - await getData() - - requestTimer1.value = setInterval(async()=>{ - // await getPumpList() - },1000) - - requestTimer2.value = setInterval(async()=>{ - // await getData() - },5000) -}) - -onUnmounted(() =>{ - clearInterval(requestTimer1.value) - clearInterval(requestTimer2.value) -}) -</script> - -<style lang="scss" scoped> -.pump-container { - width: 100%; - height: 100%; - display:flex; - justify-content:center; - align-items: center; - .content{ - width: 90%; - height: 92%; - display: flex; - justify-content: space-between; - align-items: center; - .item{ - width: 46%; - height: 100%; - background-image: url("../../../assets/images/screen/pump/item_bg.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - .item-title{ - width: 100%; - height: 10%; - background-image: url("../../../assets/images/screen/pump/title.png"); - background-repeat: no-repeat; - background-position: center; - background-size: 35% 60%; - display: flex; - align-items: center; - justify-content: center; - font-weight: 400; - font-size: 18px; - color: #FFFFFF; - } - .item-up{ - width: 100%; - height: 26%; - padding: 0 5%; - display: flex; - justify-content: space-between; - align-items: center; - .item-up-img{ - width: 42%; - height: 100%; - background-image: url("../../../assets/images/screen/facility/no-img.png"); - background-position: center; - background-repeat: no-repeat; - background-size: 50% auto; - } - .item-up-right{ - width:58%; - height: 100%; - display: flex; - justify-content: space-evenly; - flex-direction: column; - align-items: center; - padding:2% 0; - .now{ - width: 100%; - height: 60%; - background: rgba(91, 117, 124, 0.45); - border-radius: 4px; - display: flex; - justify-content: flex-start; - align-items: center; - img{ - width:54px; - height:48px; - margin-right:2%; - margin-left: 2%; - } - .name{ - font-weight: 400; - font-size: 16px; - color: #CFEDFF; - // margin-right: 2%; - } - .now-value{ - font-weight: 400; - font-size: 18px; - color: #1BCB6D; - } - .now-model{ - width:42%; - display: flex; - justify-content: space-between; - align-items: center; - .check{ - width:48%; - display: flex; - justify-content: space-around; - align-items: center; - } - .check-box{ - width:18px; - height: 18px; - // background: #2c7fdd; - background: rgba(12,12,12,0.4); - border-radius:4px; - position: relative; - } - .checked-box{ - width:18px; - height: 18px; - background: #2c7fdd; - // background: rgba(12,12,12,0.4); - border-radius:4px; - position: relative; - } - .selected{ - width:16px; - height: 8px; - position: absolute; - border-bottom:2px solid #e3eee8; - border-left:2px solid #f9fcfa; - top:calc(50% - 6px); - left:6%; - transform: rotate(-45deg); - } - .check-title{ - font-weight:600; - font-size: 14px; - // color: rgba(93, 168, 255, 1); - color: #CFEDFF; - } - } - } - } - } - .item-center{ - width: 100%; - height: 26%; - padding: 0 5%; - display: flex; - justify-content: space-between; - align-items: center; - .center-item{ - width: 28%; - height: 100%; - background-image: url("../../../assets/images/screen/pump/center-bg.png"); - background-repeat: no-repeat; - background-position: center; - display: flex; - flex-direction: column; - align-items: center; - padding: 3% 0; - justify-content:space-evenly; - img{ - width:74px; - height: 80px; - } - .center-value{ - display:block; - height: 15%; - text-align: center; - span:first-child{ - font-weight: 400; - font-size: 18px; - margin-right: 5px; - } - span:last-child{ - font-weight: 400; - font-size: 14px; - color: #B8C6D3; - } - } - .center-name{ - display:block; - height: 20%; - text-align: center; - font-weight: 400; - font-size: 13px; - color: #FFFFFF; - } - } - } - .item-bottom{ - width: 100%; - height: 38%; - padding: 0 5%; - display: flex; - justify-content: space-between; - align-items: center; - .bottom-item-info{ - height: 100%; - width: 60%; - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: column; - position: relative; - padding: 1% 5% 6%; - img{ - position: absolute; - top:2%; - width:200px; - - height:90%; - } - .info-title{ - height: 16%; - width: 100%; - z-index: 100; - font-weight: 400; - font-size: 18px; - color: #D7FEFF; - display: flex; - align-items: center; - justify-content: center; - } - .info-status{ - display: flex; - justify-content: center; - align-items: center; - width:166px; - height:50px; - border-radius:10px; - position: absolute; - bottom: 50%; - box-shadow: 0 0 20px 2px rgba(22,155,214,0.2); - background: linear-gradient(to right,rgba(22,155,214,0.5),rgba(207,237,255,0.1)); - .status-text{ - color: #00FBFF; - font-size:20px; - letter-spacing:3px; - } - // .status-off{ - // color: #00FBFF; - // font-size:20px; - // letter-spacing:3px; - // } - } - // .info-container{ - // height: 72%; - // width: 100%; - // z-index: 100; - // //background: rgba(0, 255, 240, 0.38); - // display: flex; - // flex-direction: column; - // align-items: center; - // justify-content: space-between; - // .info-content{ - // width: 100%; - // flex-wrap: nowrap; - // display: flex; - // justify-content:center; - // align-items: center; - // font-weight: 400; - // font-size: 16px; - // color: #B8C6D3; - // .point-icon{ - // width: 8px; - // height: 8px; - // background: rgba(20,220,232,0.78); - // transform: rotate(45deg); - // margin-right: 10%; - // } - // .point-label{ - // letter-spacing: 2px; - // } - // .point-value{ - // font-weight: 400; - // color: #16FCFF; - // margin-left:6%; - // margin-right: 4%; - // } - // } - // } - .info-btn{ - height: 13%; - width: 100%; - z-index: 100; - display: flex; - justify-content: center; - .handel-btn{ - // width: 96%; - width: 100px; - font-weight: 400; - font-size: 22px; - color: #91F9FF; - border: 2px solid #00FBFF; - background:#169BD6; - } - } - } - } - } - } -} -</style> \ No newline at end of file diff --git a/src/views/screen/reports/index.vue b/src/views/screen/reports/index.vue deleted file mode 100644 index 16c010d..0000000 --- a/src/views/screen/reports/index.vue +++ /dev/null @@ -1,476 +0,0 @@ -<template> - <div class="facility-container"> - - <div class="right-content"> - <div class="search-box"> - - <el-select v-model="pointId" filterable placeholder="请选择报表"> - <el-option - v-for="(item,index) in reportedList" - :key="index" - :label="item.name" - :value="item.id"> - </el-option> - </el-select> - - <el-select v-model="pointId" filterable placeholder="请选择监控点"> - <el-option - v-for="(item,index) in pointList" - :key="index" - :label="item.pointName" - :value="item.id"> - </el-option> - </el-select> - <div class="date"> - <div v-for="item in dateList" :class="item.active === 1 ? 'date-active' : '' " @click="changeDate(item.dictValue)">{{item.dictLabel}}</div> - </div> - <el-button class="search-btn" @click="searchPoint">搜索</el-button> - <el-button class="search-btn" @click="exportToExcel">导出</el-button> - </div> - <div class="table-box"> - <div class="table-title">{{reportName}}报表</div> - <div class="table-content"> - <el-table v-loading="loading" :data="tableData" width="100%" max-height="690px"> - <el-table-column - label="序号" - align="center" - prop="num" - fixed="left" - > - </el-table-column> - <el-table-column - v-for="(item, key, index) of tableHeader" - :prop="key.toString()" - :label="item" - :key="index" - align="center" - > - <template #default="scope"> - <div v-if="key.toString() === 'detail'" class="table-handle"> - <div @click="toDetail(scope.row)"></div> - </div> - </template> - </el-table-column> - </el-table> - </div> - <div class="pagination"> - <el-pagination - v-model:current-page="pageParam.page" - background - :page-size="pageParam.limit" - layout="total,prev, pager, next, jumper" - :total="pageParam.total" - @current-change="currentPage" - /> - </div> - </div> - </div> - </div> -</template> - -<script setup> -import pointApi from "@/api/facility/point"; -import { sysDictData } from '@/api/system/dict' -import { PREURL} from '@/config/index' -// import * as XLSX from 'xlsx'; -import defaultImage from '@/assets/images/screen/facility/no-img.png' -//导出 -// const exportToExcel = () => { -// const dataVal = hisData.value -// const worksheet = XLSX.utils.json_to_sheet(dataVal); -// const workbook = XLSX.utils.book_new(); -// XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); -// XLSX.writeFile(workbook, 'data.xlsx'); -// }; - - -const dateList = ref() -const dateValue = ref() -const getDate = async () =>{ - await sysDictData().searchType('date_type').then((res)=>{ - dateList.value = res.data - dateList.value.forEach((item,index)=>{ - if(index === 0){ - item.active = 1 - }else{ - item.active = 0 - } - item.dictLabel = item.dictLabel.replace('统计','') - }) - dateValue.value = dateList.value[0].dictValue - }) -} -getDate() -//选中日期 -const changeDate = (dateType) =>{ - dateValue.value = dateType - dateList.value.forEach((item)=>{ - item.active = 0 - if(item.dictValue === dateType){ - item.active = 1 - } - }) - getData({dateType:dateValue.value,pointId:pointId.value}) -} -//监控点列表 -const pointList = ref([]) -const pointId = ref(); -const getPointList = async() =>{ - - //区域列表 - let res = await pointApi().search({limit: 100, page: 1}) - if(res.code == 200){ - pointList.value = res.data.list - pointId.value = pointList.value[0].id - console.log("获取监控点数据",pointList.value); - }else{ - proxy.$modal.msgError('获取数据失败,请刷新再试!') - } -} -getPointList() -//选中数据 -const searchPoint = () =>{ - getData({dateType:dateValue.value,pointId:pointId.value}) -} -//选择报表类型 -const reportedList = ref([ - {id:1,name:"压力报表"}, - {id:2,name:"水质报表"}, -]) - - -//搜索 -const searchParam = ref() -const searchList = () =>{ - getTableData({keywords:searchParam.value}) -} -const reportName = ref("压力") -/** - * Table表格权限数据报表相关 - */ -const pageParam = ref({ - total:200, - limit:15, - page:1, -}) -const tableData = ref([]); -let tableHeader = ref({ - pointName: "所属设备", - pointyName: "数据1", - address2: "数据2", - installDate3: "数据3", - detail2: "采集时间", -}) - -/** 获取报表 */ -const loading = ref(false); -async function getTableData(val) { - loading.value = true; - if(val){ - if(!val.limit){ - val.limit = 5 - } - if(!val.page){ - val.page = 1 - } - }else{ - val = { limit:5,page:1 } - } - await pointApi().search(val).then((res) =>{ - tableData.value = res.data.list - //添加序号 - tableData.value.forEach((item,index) =>{ - item.num = index + 1 - }) - //设置详情为tableData第一项 - formDetail.value.facilityName = tableData.value[0].facilityName - formDetail.value.supplier = tableData.value[0].supplier - formDetail.value.installDate = tableData.value[0].installDate - formDetail.value.facilityUrl = tableData.value[0].facilityUrl - console.log('formDetail.value.facilityUrl',formDetail.value.facilityUrl) - //分页参数 - pageParam.value.total = res.data.total - pageParam.value.limit = res.data.limit - pageParam.value.page = res.data.page - }) - loading.value = false; -} -//分页 -const currentPage = (val) =>{ - getTableData({page:val}) -} -// 详情 - -const formDetail = ref({ - facilityName:'', - supplier:'', - installDate:'', - facilityUrl:'', -}) -const defaultImg = ref(defaultImage) -const toDetail = (row) =>{ - formDetail.value.facilityName = row.facilityName - formDetail.value.supplier = row.supplier - formDetail.value.installDate = row.installDate - formDetail.value.facilityUrl = row.facilityUrl - console.log('todetail',formDetail.value.facilityUrl) -} -const backgroundStyle = computed(() => ({ - backgroundImage: `url('${ PREURL+ formDetail.value.facilityUrl }')`, - backgroundSize: 'contain', - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', -})); -onMounted(async ()=>{ - await getTableData() -}) -</script> - -<style lang="scss" scoped> -.facility-container{ - width: 100%; - height:100%; - padding:0 3% 1% 3%; - display:flex; - justify-content: space-between; -} -.left-content{ - width:22%; - height:100%; - background-image: url("../../../assets/images/screen/facility/left-box.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - padding:4% 1% 1%; - .left-title{ - width: 100%; - height:5%; - background-image: url("../../../assets/images/screen/facility/left-title.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - font-weight: 400; - font-size: 20px; - color: #FFFFFF; - padding-left:9%; - padding-top:1%; - } - .img-box{ - width:83%; - height:35%; - background: rgba(244, 248, 250, 0.21); - border-radius: 10px; - margin: 15% auto 0; - padding: 1%; - .left-img{ - width:100%; - height:100%; - display: flex; - align-items: center; - justify-content: center; - } - } - .left-detail{ - width:100%; - height: 30%; - //background: rgba(255, 255, 255, 0.29); - padding:6% 10% 10%; - p{ - font-weight: 400; - font-size: 16px; - color: #FFFFFF; - //background: rgba(0, 175, 240, 0.51); - } - } -} -.right-content{ - width:100%;//698 - height:100%;//918.7 - display:flex; - justify-content: space-between; - flex-direction: column; - align-items: center; - padding:1% 0; - .date{ - - width: 322px; - height: 50px; - background-image: url("../../../assets/images/screen/statistics/date.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - margin: 0 20px; - display: flex; - align-items: center; - justify-content:center; - font-weight: 400; - font-size: 18px; - color: #DDDDDD; - div{ - width: 25%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - .date-active{ - background-image: url("../../../assets/images/screen/statistics/select-date.png"); - } - } - .search-box{ - width:100%; - height:6%; - display: flex; - :deep(.el-select__wrapper){ - height: 50%; - width: 100%; - background:transparent !important; - border: 1px solid #1fb0be !important; - border-radius: 5px 0 0 5px; - } - .search-input{ - width:70%; - height:100%; - margin-right:3%; - :deep(.el-input__wrapper){ - background:linear-gradient(to right ,rgba(6,92,135,0.56),rgba(6,92,135,0.16)) !important; - border: 1px solid #1fb0be !important; - border-radius: 8px !important; - } - .el-input.is-focus .el-input__inner{ - border-color: #2ec4d2 !important; - } - } - .search-btn{ - width:7%; - height:100%; - background-color: #2a6bb6 !important; - border: 1px solid #03e9ff !important; - border-radius: 8px !important; - font-weight: 400; - font-size: 22px; - color: #B9F9FF; - } - } - .table-box{ - width:100%; - height:89%; - background-image: url("../../../assets/images/screen/facility/right-box.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - .table-title{ - height:10%; - width:100%; - display: flex; - justify-content:center; - align-items: center; - font-weight: 500; - font-size: 22px; - color: #8DFEFF; - } - .table-content{ - height:80%; - width:100%; - padding: 1% 4%; - //background: #1D2129; - //修改边框和字体 - :deep(.el-table){ - --el-table-border-color:rgba(0,0,0,0); - font-weight: 400; - font-size: 20px; - color: #D1D1D1; - } - //修改头部字体 - :deep(.el-table__header th){ - font-weight: 400; - font-size: 20px; - color: #D1D1D1; - } - /*最外层透明*/ - :deep(.el-table), - :deep(.el-table__expanded-cell){ - background-color: transparent !important; - } - /* 表格内背景颜色 */ - :deep(.el-table th), - :deep(.el-table tr), - :deep(.el-table td){ - background-color: transparent !important; - border-bottom:1px solid #1D627D !important; - } - //:deep(.el-table tr){ - // border:1px solid #000 !important; - //} - /*去除底边框*/ - :deep(.el-table td.el-table__cell){ - border:0; - } - :deep(.el-table th.el-table__cell.is-leaf) { - border: 0; - } - /*去除底部灰条.el-table::before*/ - :deep(.el-table::before) { - display: none; - } - .table-handle{ - display: flex; - align-items: center; - justify-content: center; - div{ - width:30px; - height: 30px; - background-image: url("../../../assets/images/screen/facility/detail.png"); - } - } - } - .pagination{ - width:100%; - height:10%; - display:flex; - justify-content:center; - :deep(.el-pagination__total), - :deep(.el-pagination__goto), - :deep(.el-pagination__classifier){ - color: #bcd4f3 - } - :deep(.el-pager li) { - font-size: 15px; - color: #BAEBEC; - background: transparent; - padding: 0 4px; - border: 1px solid #BAEBEC; - border-radius: 0; - margin: 0 4px; - min-width: 25px; - height: 25px; - } - :deep(.el-pagination button) { - color: #BAEBEC; - background: transparent; - padding: 0 4px; - border-radius: 0; - margin: 0 4px; - } - :deep(.el-pagination .btn-next .el-icon), - :deep(.el-pagination .btn-prev .el-icon) { - font-size: 18px !important; - } - :deep(.el-input__wrapper) { - background: transparent; - box-shadow: 0 0 0 1px #BAEBEC inset; - border-radius: 0; - height: 25px; - min-width: 30px; - } - :deep(.el-input__inner) { - font-size: 16px; - color: #BAEBEC; - height: 25px; - line-height: 30px !important; - } - :deep(.el-pager li.is-active) { - background-color: #1FB0BE; - color: #ffffff; - border: 1px solid #1FB0BE; - } - } - } -} -</style> \ No newline at end of file diff --git a/src/views/screen/revenue/index.vue b/src/views/screen/revenue/index.vue deleted file mode 100644 index 7d0dea5..0000000 --- a/src/views/screen/revenue/index.vue +++ /dev/null @@ -1,1110 +0,0 @@ -<template> - <div class="revenue"> - <div class="up-container"> - <div class="item"> - <div class="item-title"> - <div></div> - <span>营收总览</span> - </div> - <div class="item-content"> - <div class="revenue-content"> - <div class="balance"> - <div class="balance-money">{{totalAmount}}</div> - <div class="balance-account">账户余额</div> - <div class="balance-unit">元</div> - </div> - <div class="compare"> - <div v-for="(item,index) in overviewList" class="compare-item"> - <div class="compare-item-up"> - <div class="compare-item-up-left"> - <img src="../../../assets/images/screen/revenue/icon.png" alt=""> - <div>{{ item.name }}</div> - </div> - <div class="compare-item-up-income">{{ item.amount }}元</div> - <div class="compare-item-up-change"> 环比{{ item.change}}{{ item.huanbiAmount }}</div> - </div> - <div class="compare-item-down"> - <div class="compare-item-down-progress"><el-progress class="el-percentage" :percentage="item.rate" :stroke-width="8" :color="item.color" :show-text="false" /></div> - <div class="compare-item-down-percentage"> - <div v-if="item.change === '下降'" class="down-icon"></div> - <div v-else class="up-icon"></div> - <div class="percentage">{{ item.rate }}%</div> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - <div class="item"> - <div class="item-title"> - <div></div> - <span>用户总览</span> - </div> - <div class="user-container"> - <div class="user-content"> - <div class="user-top"> - <div class="top-one"><span>用户总数</span></div> - <div class="top-two"> - <span>本年新增用户数</span> - <span>{{ userQuantityList.userAddCount}}</span> - </div> - <div class="top-three"> - <span>{{ userQuantityList.userSumCount}}</span> - <div></div> - </div> - <div class="top-four"> - <span>本年注销用户数</span> - <span>{{ userQuantityList.userCloseCount}}</span> - </div> - </div> - <div class="user-pie"> - <div class="pie-item"> - <div class="pie-left-title"><span>用户类型</span></div> - <div id="user-type"></div> - </div> - <div class="pie-item"> - <div class="pie-right-title"><span>用户缴费情况</span></div> - <div id="user-pay"></div> - </div> - </div> - </div> - </div> - </div> - <div class="item"> - <div class="item-title"> - <div></div> - <span>抄表记录</span> - </div> - <div class="meter-container"> - <div class="table-header-bg"></div> - <div class="table-content"> - <el-table v-loading="loading" :data="tableData" width="100%" max-height="690px"> - <el-table-column - v-for="(item, key, index) of tableHeader" - :prop="key.toString()" - :label="item" - :key="index" - align="center" - :width="key.toString() == 'createTimeView' ? '150' : ''" - > - </el-table-column> - </el-table> - </div> - </div> - </div> - </div> - <div class="bottom-container"> - <div class="trend-item-container"> - <div class="trend-title"> - <div></div> - <span>近一年总用水趋势</span> - </div> - <div class="trend-content"> - <div id="water-chart"></div> - <div class="rank"> - <div v-if="waterRankList.waterRankTop[0].userName" class="rank-top"> - <div class="rank-one"> - <div>NO.1</div> - - <el-tooltip placement="top" effect="light"> - <span class="rank-text">{{ waterRankList.waterRankTop[0].userName }}</span> - <template #content> - <span class="rank-text-tips1">{{ waterRankList.waterRankTop[0].userName }}</span> - </template> - </el-tooltip> - <span>... </span> - - <span>{{ waterRankList.waterRankTop[0].countValue }}吨</span> - </div> - <!-- -------------------------------------------------------- --> - <div class="rank-two"> - <div>NO.2</div> - <el-tooltip placement="top" effect="light"> - <span class="rank-text">{{ waterRankList.waterRankTop[1].userName }}</span> - <template #content> - <span class="rank-text-tips1">{{ waterRankList.waterRankTop[1].userName }}</span> - </template> - </el-tooltip> - <span>... </span> - <span>{{ waterRankList.waterRankTop[1].countValue }}吨</span> - </div> - <!-- -------------------------------------------------------- --> - <div class="rank-three"> - <div>NO.3</div> - <el-tooltip placement="top" effect="light"> - <span class="rank-text">{{ waterRankList.waterRankTop[2].userName }}</span> - <template #content> - <span class="rank-text-tips1">{{ waterRankList.waterRankTop[2].userName }}</span> - </template> - </el-tooltip> - <span>... </span> - <span>{{ waterRankList.waterRankTop[2].countValue }}吨</span> - </div> - </div> - <!-- -------------------------------------------------------- --> - <div v-if="waterRankList.waterRankPlain[0].userName" class="rank-plain"> - <div v-for="(item,index) in waterRankList.waterRankPlain" :key="index" class="rank-item"> - <div class="rank-num"> NO.{{ index + 4 }} </div> - - <el-tooltip placement="top" effect="light"> - <div class="rank-name rank-text">{{ item.userName }}</div> - <template #content> - <span class="rank-text-tips1">{{ item.userName }}</span> - </template> - </el-tooltip> - - <!-- <div class="rank-name rank-text">{{ item.userName }}{{ item.countValue}}吨</div> --> - <div class="rank-name">... </div> - <div class="rank-name">{{ item.countValue}}吨</div> - </div> - </div> - </div> - </div> - </div> - <div class="trend-item-container"> - <div class="trend-title"> - <div></div> - <span>近一年缴费趋势</span> - </div> - <div class="trend-content"> - <div id="pay-chart"></div> - <!-- 缴费排名 --> - <div class="rank"> - <div v-if="payRankList.rankTop[0].userName" class="rank-top"> - <div class="rank-one"> - <div>NO.1</div> - - <el-tooltip placement="top" effect="light"> - <span class="rank-text">{{ payRankList.rankTop[0].userName }}</span> - <template #content> - <span class="rank-text-tips1">{{payRankList.rankTop[0].userName }}</span> - </template> - </el-tooltip> - - <!-- <span class="rank-text">{{ payRankList.rankTop[0].userName }}{{ payRankList.rankTop[0].countValue }}元</span> --> - <span>... </span> - <span>{{ payRankList.rankTop[0].countValue }}元</span> - </div> - <div class="rank-two"> - <div>NO.2</div> - - <el-tooltip placement="top" effect="light"> - <span class="rank-text">{{ payRankList.rankTop[1].userName }}</span> - <template #content> - <span class="rank-text-tips1">{{payRankList.rankTop[1].userName }}</span> - </template> - </el-tooltip> - <span>... </span> - <span>{{ payRankList.rankTop[1].countValue }}元</span> - </div> - <div class="rank-three"> - <div>NO.3</div> - - <el-tooltip placement="top" effect="light"> - <span class="rank-text">{{ payRankList.rankTop[2].userName }}</span> - <template #content> - <span class="rank-text-tips1">{{payRankList.rankTop[2].userName }}</span> - </template> - </el-tooltip> - <!-- <span class="rank-text">{{ payRankList.rankTop[2].userName }}{{ payRankList.rankTop[2].countValue }}元</span> --> - <span>... </span> - <span>{{ payRankList.rankTop[2].countValue }}元</span> - </div> - </div> - <div v-if="payRankList.rankPlain[0].userName" class="rank-plain"> - <div v-for="(item,index) in payRankList.rankPlain" :key="index" class="rank-item"> - <div class="rank-num"> NO.{{ index + 4 }} </div> - - <el-tooltip placement="top" effect="light"> - <div class="rank-name rank-text">{{ item.userName }}</div> - <template #content> - <span class="rank-text-tips1">{{ item.userName }}</span> - </template> - </el-tooltip> - - <div class="rank-name">...</div> - <div class="rank-name">{{ item.countValue}}元</div> - </div> - </div> - </div> - </div> - </div> - </div> - </div> -</template> - -<script setup> -import * as echarts from 'echarts' -import { revenue } from '@/api/screen/revenue/index' - -/** - * - * 营收总览--------------------------- - */ -//获取营收总览数据 -const overviewList = ref([ - {name: '暂无数据',amount: '0.00',huanbiAmount: '0.00',rate: '0.00'}, - {name: '暂无数据',amount: '0.00',huanbiAmount: '0.00',rate: '0.00'}, - {name: '暂无数据',amount: '0.00',huanbiAmount: '0.00',rate: '0.00'}, -]) -const totalAmount = ref([]) -const getOverviewList = async () => { - await revenue().getEvenueStatistics().then((res) => { - totalAmount.value = res.data.totalAmount === '0' ? '0.00' : res.data.totalAmount - overviewList.value = res.data.listVO - overviewList.value.forEach(item => { - if(item.huanbiAmount >= item.amount){ - item.change = '下降' - }else{ - item.change = '增长' - } - }) - }) -} -/** - * - * 用户总览--------------------------------------------- - */ - -//获取-营收用户-数量-数据 -const userQuantityList = ref( { - userSumCount: '0.00', - userCloseCount: '0.00', - userAddCount: '0.00', -},) -const getUserQuantityList = async () => { - await revenue().getUserCount().then((res) => { - userQuantityList.value = res.data - }) -} -//获取-营收用户-类型-数据 -let loadingEcharts = { - text: 'loading', - textColor: 'rgba(105,133,219, 1)', - maskColor: 'rgba(202, 224, 252, 0.2)', - fontSize: '20px', -} -let userTypeEcharts = undefined -let userPayEcharts = undefined -const echartsInit = () =>{ - payTrendEcharts = echarts.init(document.getElementById('pay-chart')); - userWaterTrendEcharts = echarts.init(document.getElementById('water-chart')); - userTypeEcharts = echarts.init(document.getElementById('user-type')); - userPayEcharts = echarts.init(document.getElementById('user-pay')); -} -//营收用户-echarts配置 - let baseOption = { - tooltip: { - trigger: 'item', - }, - legend: { - orient: 'horizontal', - bottom: 'bottom', - textStyle:{ - fontSize:12, - color:'#fff' - } - - }, - series:{ - type: 'pie', - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - }, - label:{ - show: false, - } - }, - }; -//获取用户类型 -const userTypeList = ref([]) -const getUserType = async () =>{ - userTypeEcharts.showLoading(loadingEcharts) - await revenue().getUserClassify().then((res) => { - userTypeList.value = res.data - }) - userTypeEcharts.hideLoading() -let option = JSON.parse(JSON.stringify(baseOption)) - option.series.data = userTypeList.value - option.series.radius = '75%' - userTypeEcharts.setOption(option,true) -} -//获取用户缴费 -const userPayList = ref([]) -const getUserPay = async () =>{ - userPayEcharts.showLoading(loadingEcharts) - await revenue().getUserPayCondition().then((res) => { - userPayList.value = [ - {name:'欠款',value:res.data.ArrearageCount}, - {name:'已缴费',value:res.data.yesCount}, - {name:'未缴费',value:res.data.notCount}, - ] - }) - userPayEcharts.hideLoading() - let option = JSON.parse(JSON.stringify(baseOption)) - option.series.data = userPayList.value - option.series.radius = ['40%','75%'] - userPayEcharts.setOption(option,true) -} -/** - * - * 抄表记录------------------------- - */ -const tableData = ref([]); -let tableHeader = ref({ - userName: "用户名称", - waterMeterSn: "水表编号", - atData: "累计用水", - deductAmount: "扣除金额", - usableData: "剩余金额", - createTimeView: "抄表时间", -}) - -/** 获取table列表 */ -const loading = ref(false); -async function getTableData() { - loading.value = true; - await revenue().getMeterReading().then((res) =>{ - res.data.forEach((item) =>{ - item.atData = item.atData + ' t' - }) - tableData.value = res.data - }) - loading.value = false; -} - -/** - *用水趋势------------------------------- - */ -const userWaterList = ref([]) -let userWaterTrendEcharts = undefined -const getUserWaterTrend = async() =>{ - userWaterTrendEcharts.showLoading(loadingEcharts) - let data = [] - await revenue().searchWater().then((res) => { - if(res.data){ - Object.keys(res.data).forEach((key) => { - data.push({month:key,count:res.data[key]}) - }) - userWaterList.value = data - console.log('userWaterList.value',userWaterList.value) - } - }) - userWaterTrendEcharts.hideLoading() - setTrendOption(userWaterTrendEcharts,userWaterList.value,['month','count'],'用水量(吨)','用水量') -} -/** - *缴费趋势 - */ -const payList = ref([]) -let payTrendEcharts = undefined -const getPayTrend = async() =>{ - payTrendEcharts.showLoading(loadingEcharts) - let data = [] - await revenue().searchPay().then((res) => { - if(res.data){ - Object.keys(res.data).forEach((key) => { - data.push({month:key,totalamount:res.data[key]}) - }) - payList.value = data - console.log('payList.value',payList.value) - } - }) - payTrendEcharts.hideLoading() - setTrendOption(payTrendEcharts,payList.value,['month','totalamount'],'金额(元)','金额') -} -//设置趋势echarts配置项 -const setTrendOption = (echarts,dateList,dimensionsList,yAxisTitle,toolstipTitle) =>{ - let option = { - tooltip: { - trigger: 'axis', - axisPointer: { - label:{ - formatter:'{value}月' - }, - type: 'line' , - lineStyle:{ - color:'rgba(231,237,244,0.48)', - }, - snap:true, - }, - }, - xAxis: { - axisLine:{ - show: true, - lineStyle:{ - color:'rgba(231,236,240,0.4)', - width:1 - } - }, - axisTick:{ - inside:true - }, - axisLabel:{ - show:false, - color:'#B3E3E5', - fontSize: 14 - }, - type: 'category', - }, - yAxis: { - name:yAxisTitle, - nameTextStyle:{ - color:'#B3E3E5', - fontSize: 16, - fontWeight:400, - }, - axisLine:{ - show: true, - lineStyle:{ - color:'rgba(231,236,240,0.4)', - width:1 - } - }, - splitLine:{ - show:true, - lineStyle:{ - color:'rgba(231,236,240,0.2)', - } - }, - axisLabel:{ - color:'#B3E3E5', - fontSize:12, - }, - type: 'value' - }, - dataset:{ - dimensions:dimensionsList, - source:dateList, - }, - series:{ - name:toolstipTitle, - type: 'line', - smooth: true, - }, - grid:{ - width:'90%', - height:'80%', - top:'11%', - left:'10%', - } - }; - echarts.setOption(option,true); -} - -/** - * - * 缴费排行----------------------- - */ -const payRankList = ref({ - rankTop:[ - {userName:"",countValue:''}, - {userName:"",countValue:''}, - {userName:"",countValue:''}, - ], - rankPlain:[ - {userName:"",countValue:''}, - {userName:"",countValue:''}, - {userName:"",countValue:''}, - {userName:"",countValue:''}, - {userName:"",countValue:''}, - ], -}) -const getPayRankList = async () =>{ - await revenue().getPayRank().then((res) =>{ - if(res.data.length !== 0){ - payRankList.value = {rankTop:[],rankPlain:[]} - res.data.forEach((item,index) => { - if(index <= 2){ - payRankList.value.rankTop.push(item) - // payRankList.value.rankTop[index] = res.data[index] - }else if(index > 2 && index < 8){ - payRankList.value.rankPlain.push(item) - // payRankList.value.rankPlain[index] = res.data[index] - } - }) - } - }) -} -getPayRankList() -//用水排行 -const waterRankList = ref({ - waterRankTop:[ - {userName:"",countValue:''}, - {userName:"",countValue:''}, - {userName:"",countValue:''}, - ], - waterRankPlain:[ - {userName:"",countValue:''}, - {userName:"",countValue:''}, - {userName:"",countValue:''}, - {userName:"",countValue:''}, - {userName:"",countValue:''}, - ], -}) -const getWaterRankList = async () =>{ - await revenue().getWaterRank().then((res) =>{ - waterRankList.value = {waterRankTop:[],waterRankPlain:[]} - if(res.data.length !== 0){ - res.data.forEach((item,index) => { - if(index <= 2){ - waterRankList.value.waterRankTop.push(item) - }else if(index > 2 && index < 8){ - waterRankList.value.waterRankPlain.push(item) - } - }) - } - }) -} -getWaterRankList() -window.addEventListener('resize', function() { - payTrendEcharts.resize(); - userWaterTrendEcharts.resize(); - userTypeEcharts.resize(); - userPayEcharts.resize(); -}); -onMounted(async () => { - echartsInit() - await getTableData() - await getUserType() - await getUserPay() - await getOverviewList() - await getUserQuantityList() - await getUserWaterTrend() - await getPayTrend() - -}) -//卸载前销毁图表 -const disposeEcharts = (echarts) => { - if (echarts) { - echarts.dispose(); - echarts = null; - } -} -onBeforeUnmount(async ()=> { - disposeEcharts(payTrendEcharts) - disposeEcharts(userWaterTrendEcharts) - disposeEcharts(userTypeEcharts) - disposeEcharts(userPayEcharts) -}) -</script> - -<style lang="scss" scoped> -.revenue{ - width: 100%;//1920 - height: 100%;//928 - display: flex; - flex-direction: column; - justify-content: space-evenly; - .up-container{ - display: flex; - justify-content: space-evenly; - width: 100%;//1920 - height:52%;//455 - .item{ - width:31%;//595 - height:100%;//455 - .item-title{ - width: 100%;//595 - height:5%; - display: flex; - align-items: center; - margin-bottom:1%; - padding-left: 5px; - div{ - width: 2px; - height:100%; - background: #6EDEE3; - margin-right: 12px; - } - span{ - font-size: 22px; - color: #FFFFFF; - text-shadow: 0 2px 2px rgba(32,32,32,0.8); - } - } - .item-content{ - width: 100%;//595 - height:94%;//432 - background: rgba(26,61,68,0.5); - border: 1px solid #0D385F; - padding:4% 5%;//25 30 - .revenue-content{ - width:100%; - height:100%; - .balance{ - height:30%; - width: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding-bottom:1%; - .balance-money{ - font-weight: 400; - font-size: 24px; - color: #00FFF0; - } - .balance-account{ - width:135px; - height:37px; - background-image: url("../../../assets/images/screen/revenue/balance.png"); - background-size: 100% 100%; - font-weight: 400; - font-size: 17px; - color: #95F2F6; - text-align: center; - line-height: 37px; - } - .balance-unit{ - font-weight: 400; - font-size: 15px; - color: #95F2F6; - margin-top: -15px; - } - } - .compare{ - height:69%; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - .compare-item{ - height:30%; - width: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - } - .compare-item-up{ - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - padding-right: 120px; - .compare-item-up-left{ - display: flex; - align-items: center; - img{ - margin-right: 10px; - } - div{ - font-weight: 400; - font-size: 20px; - color: #95F2F6; - } - } - .compare-item-up-income{ - font-weight: 400; - font-size: 20px; - color: #89AFFB; - } - .compare-item-up-change{ - font-weight: 400; - font-size: 18px; - color: #95F2F6; - } - } - .compare-item-down{ - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - padding-left: 60px; - .compare-item-down-progress{ - width: 78%; - :deep(.el-percentage .el-progress-bar__outer ){ - background-color: #154B7D; /* 设置你想要的背景色 */ - } - } - .compare-item-down-percentage{ - width: 22%; - padding-left:10px; - display: flex; - justify-content:space-between; - .up-icon{ - width: 16px; - height: 22px; - background-image: url("../../../assets/images/screen/revenue/up-icon.png"); - background-size: 100% 100%; - } - .down-icon{ - width: 16px; - height: 22px; - background-image: url("../../../assets/images/screen/revenue/down-icon.png"); - background-size: 100% 100%; - } - .percentage{ - font-weight: 400; - font-size: 20px; - color: #95F2F6; - } - } - } - } - } - } - .user-container{ - width: 100%; - height:95%; - background: rgba(26,61,68,0.5); - border: 1px solid #0D385F; - padding:20px 10px; - margin: 0 auto; - .user-content{ - width:100%; - height:100%; - display: flex; - justify-content: space-between; - flex-direction: column; - .user-top{ - width:100%; - height:30%; - display: flex; - justify-content: space-around; - flex-wrap: wrap; - .top-one{ - width:173px; - height:31px; - background-image: url("../../../assets/images/screen/revenue/user-quantity.png"); - background-size: 100% 100%; - span{ - margin-left: 10px; - font-weight: 400; - font-size: 20px; - color: #95F2F6; - line-height: 31px; - } - } - .top-two, .top-four{ - width:254px; - height:33px; - background-image: url("../../../assets/images/screen/revenue/user-up.png"); - background-size: 100% 100%; - span:first-child{ - font-weight: 400; - font-size: 20px; - color: #1FB0BE; - margin-right: 20px; - line-height: 33px; - } - span:last-child{ - font-weight: 400; - font-size: 20px; - color: #95F2F6; - } - } - .top-three{ - span{ - font-weight: 400; - font-size: 28px; - color: #95F2F6; - } - div{ - width: 182px; - height: 2px; - background: #00FFF6; - border: 2px solid #1FB0BE; - } - } - } - .user-pie{ - display: flex; - justify-content: center; - //background: rgba(200, 208, 213, 0.3); - height:70%; - width:100%; - padding:1% 2% 0; - .pie-item{ - width:50%; - height:100%; - display: flex; - justify-content:center; - flex-direction: column; - align-items: center; - //background: rgba(165, 170, 179, 0.4); - .pie-left-title{ - width:80%; - height:33px; - background-image: url("../../../assets/images/screen/revenue/user-type.png"); - background-repeat: no-repeat; - span{ - font-weight: 400; - font-size: 20px; - color: #95F2F6; - margin-left:35px; - } - } - .pie-right-title{ - width:80%; - height:33px; - background-image: url("../../../assets/images/screen/revenue/user-type.png"); - background-repeat: no-repeat; - span{ - font-weight: 400; - font-size: 20px; - color: #95F2F6; - margin-left:35px; - } - } - #user-type{ - height:85%; - width: 100%; - //background: rgba(222, 223, 225, 0.34); - } - #user-pay{ - height:85%; - width: 100%; - //background: rgba(222, 223, 225, 0.34); - } - } - //.pie-item{ - // width:50%; - // height:100%; - // display: flex; - // justify-content: space-between; - // flex-direction: column; - // align-items: center; - // background: rgba(165, 179, 168, 0.39); - //} - } - } - } - .meter-container{ - width: 100%; - height:95%; - background: rgba(26,61,68,0.5); - border: 1px solid #0D385F; - margin: 0 auto; - position: relative; - .table-header-bg{ - height:14%; - width:100%; - background: linear-gradient(to right,rgba(21,173,248,0.5),rgba(66,93,114,0.3)); - border: 1px solid #0D385F; - position: absolute; - } - .table-content{ - height:87%; - width:100%; - overflow: hidden; - //修改边框和字体 - :deep(.el-table){ - --el-table-border-color:rgba(0,0,0,0); - font-weight:400; - font-size: 16px; - color: #95F2F6; - } - - //修改头部字体 - :deep(.el-table__header th){ - font-weight: 400; - font-size: 14px; - color: #59F8FF; - } - /*最外层透明*/ - :deep(.el-table), - :deep(.el-table__expanded-cell){ - background-color: transparent !important; - } - /* 表格内背景颜色 */ - :deep(.el-table th), - :deep(.el-table tr), - :deep(.el-table td){ - background-color: transparent !important; - border-bottom:1px solid #1D627D !important; - } - //:deep(.el-table tr){ - // border:1px solid #000 !important; - //} - /*去除底边框*/ - :deep(.el-table td.el-table__cell){ - border:0; - } - :deep(.el-table th.el-table__cell.is-leaf) { - border: 0; - } - /*去除底部灰条.el-table::before*/ - :deep(.el-table::before) { - display: none; - } - } - } - } - } - .bottom-container{ - display: flex; - justify-content: space-evenly; - width: 100%; - height:43%; - .trend-item-container{ - display: flex; - align-items: center; - flex-direction: column; - width:47.5%; - height:100%; - } - .trend-title{ - width: 100%; - height:7%; - display: flex; - align-items: center; - margin-bottom:1%; - padding-left: 5px; - span{ - font-size: 22px; - color: #FFFFFF; - text-shadow: 0 2px 2px rgba(32,32,32,0.8); - } - div{ - width:2px; - height:100%; - background: #6EDEE3; - margin-right: 12px; - } - } - .trend-content{ - width:100%; - height:92%; - display: flex; - background: rgba(26,61,68,0.5); - border: 1px solid #0D385F; - padding:5px; - #pay-chart{ - width:75%; - height:100%; - }; - #water-chart{ - width:75%; - height:100%; - } - .rank{ - width:25%; - height:100%; - display: flex; - align-items: center; - justify-content:center; - flex-direction: column; - padding:2% 0; - //排名公用样式rank-text - .rank-text{ - width:56px; - height: 100%; - line-height:100%; - overflow:hidden; - } - .rank-top{ - display: flex; - align-items: center; - justify-content: space-between; - flex-direction: column; - padding: 0 6px; - width: 100%; - height: 35%; - .rank-one{ - height:18px; - width: 100%; - justify-content:flex-start; - display: flex; - align-items: center; - div{ - font-weight: 400; - font-size: 22px; - color: #FFE082; - text-shadow: 0 3px 0 rgba(255,186,87,0.65); - margin-right:5px; - } - span{ - font-weight: normal; - font-size: 18px; - color: #FFE082; - } - } - .rank-two{ - height:18px; - width: 100%; - justify-content:flex-start; - display: flex; - align-items: center; - div{ - font-weight: 400; - font-size: 22px; - color: #C5CAE9; - text-shadow: 0 3px 0 #9FA8DA; - margin-right:5px; - } - span{ - font-weight: normal; - font-size: 18px; - color: #C1C6E7; - } - } - .rank-three{ - height:18px; - width: 100%; - justify-content:flex-start; - display: flex; - align-items: center; - div{ - font-weight: 400; - font-size: 22px; - color: #CEB1A1; - text-shadow: 0 3px 0 #AF8A77; - margin-right:5px; - } - span{ - font-weight: normal; - font-size: 18px; - color: #CEB1A1; - } - } - } - .rank-plain{ - width: 100%; - height: 58%; - display: flex; - align-items: center; - justify-content:space-between; - flex-direction: column; - padding:0 5px; - margin-top:7%; - .rank-item{ - height:16px; - width: 100%; - display: flex; - align-items: center; - justify-content:flex-start; - .rank-num{ - font-weight: 400; - font-size: 18px; - color: #FFFFFF; - margin-right:16px; - } - .rank-name{ - font-weight:normal; - font-size: 16px; - color: #FFFFFF; - } - } - } - } - } - } -} -.rank-text-tips1{ - font-weight: normal; - font-size: 14px; - color: #4e60d3; -} -.rank-text-tips2{ - font-weight:600; - font-size: 16px; - color: #4e60d3; -} -</style> \ No newline at end of file diff --git a/src/views/screen/statistics/index.vue b/src/views/screen/statistics/index.vue deleted file mode 100644 index 9ac97c9..0000000 --- a/src/views/screen/statistics/index.vue +++ /dev/null @@ -1,569 +0,0 @@ -<template> - <div class="statistics"> - <div class="date"> - <div v-for="item in dateList" :class="item.active === 1 ? 'date-active' : '' " @click="changeDate(item.dictValue)">{{item.dictLabel}}</div> - </div> - <div class="container"> - <div class="echarts"> - <div class="title"><span>6#出口压力{{ title[0] }}</span></div> - <div id="echarts-one"></div> - </div> - - <div class="echarts"> - <div class="title"><span>6#出口流量{{ title[1] }}</span></div> - <div id="echarts-two"></div> - </div> - - <div class="echarts"> - <div class="title"><span>6#水池液位{{ title[2] }}</span></div> - <div id="echarts-three"></div> - </div> - - <div class="echarts"> - <div class="title"><span>7#出口压力{{ title[3] }}</span></div> - <div id="echarts-four"></div> - </div> - <div class="echarts"> - <div class="title"><span>7#出口流量</span></div> - <div id="pressure-one"></div> - </div> - <div class="echarts"> - <div class="title"><span>7#水池液位</span></div> - <div id="pressure-two"></div> - </div> - <!-- <div class="echarts"> - <div class="title">1#压力计</div> - <div id="pressure-one"></div> - </div> - <div class="echarts"> - <div class="title">2#压力计</div> - <div id="pressure-two"></div> - </div> - <div class="echarts"> - <div class="title">3#压力计</div> - <div id="pressure-three"></div> - </div> - <div class="echarts"> - <div class="title">1#液位计</div> - <div id="liquid-one"></div> - </div> - <div class="echarts"> - <div class="title">2#液位计</div> - <div id="liquid-two"></div> - </div> - <div class="echarts"> - <div class="title">2#液位计</div> - <div id="liquid-two"></div> - </div> - <div class="echarts"> - <div class="title">3#液位计</div> - <div id="liquid-three"></div> - </div> - <div class="echarts"> - <div class="title">1#流量计</div> - <div id="flow-one"></div> - </div> - <div class="echarts"> - <div class="title">2#流量计</div> - <div id="flow-two"></div> - </div> - <div class="echarts"> - <div class="title">3#流量计</div> - <div id="flow-three"></div> - </div> --> - <!-- <div class="date"> - <div v-for="item in dateList" :class="item.active === 1 ? 'date-active' : '' " @click="changeDate(item.dictValue)">{{item.dictLabel}}</div> - </div> --> - - <!-- <div class="search"> - <el-select v-model="pointId" filterable placeholder="请选择监控点"> - <el-option - v-for="(item,index) in pointList" - :key="index" - :label="item.pointName" - :value="item.id"> - </el-option> - </el-select> - <el-button type="primary" class="search-btn" @click="searchPoint">搜 索</el-button> - </div> --> - </div> - </div> -</template> - -<script setup> -import statistics from '@/api/screen/statistics/index' -import pointApi from "@/api/facility/point.js"; -import { sysDictData } from '@/api/system/dict' -import * as echarts from 'echarts' -import { useRoute } from 'vue-router' -const route = ref(useRoute()) -//echarts 初始化 -let echartsOne = null; -let echartsTwo = null; -let echartsThree = null; -let echartsFour = null; - -// let pressureOneEcharts = undefined; -// let pressureTwoEcharts = undefined; -// let pressureThreeEcharts = undefined; - -// let liquidOneEcharts = undefined; -// let liquidTwoEcharts = undefined; -// let liquidThreeEcharts = undefined; - -// let flowOneEcharts = undefined; -// let flowTwoEcharts = undefined; -// let flowThreeEcharts = undefined; -const initEcharts = () => { - - echartsOne = echarts.init(document.getElementById('echarts-one')) - echartsTwo = echarts.init(document.getElementById('echarts-two')) - echartsThree = echarts.init(document.getElementById('echarts-three')) - echartsFour = echarts.init(document.getElementById('echarts-four')) - - // pressureOneEcharts = echarts.init(document.getElementById('pressure-one')) - // pressureTwoEcharts = echarts.init(document.getElementById('pressure-two')) - // pressureThreeEcharts = echarts.init(document.getElementById('pressure-three')) - - // liquidOneEcharts = echarts.init(document.getElementById('liquid-one')) - // liquidTwoEcharts = echarts.init(document.getElementById('liquid-two')) - // liquidThreeEcharts = echarts.init(document.getElementById('liquid-three')) - - // flowOneEcharts = echarts.init(document.getElementById('flow-one')) - // flowTwoEcharts = echarts.init(document.getElementById('flow-two')) - // flowThreeEcharts = echarts.init(document.getElementById('flow-three')) -} - -//echarts 配置项 -let baseOption = { - tooltip:{ - trigger:'axis', - axisPointer: { - label:{ - formatter:'上传时间:{value}' - }, - type: 'line' , - lineStyle:{ - color:'rgba(231,237,244,0.48)', - }, - snap:true, - }, - }, - xAxis: { - axisLine:{ - show: true, - lineStyle:{ - color:'rgba(231,236,240,0.4)', - width:1 - } - }, - axisTick:{ - inside:true - }, - axisLabel:{ - show:false, - }, - type: 'time', - }, - yAxis: { - axisLine:{ - show: true, - lineStyle:{ - color:'rgba(231,236,240,0.4)', - width:1 - } - }, - splitLine:{ - show:false, - lineStyle:{ - color:'rgba(231,236,240,0.2)', - } - }, - axisLabel:{ - color:'#B3E3E5', - fontSize:12, - }, - type: 'value' - }, - dataset:{ - dimensions:['uploadTimeView','columnsValue'], - // source:data, - }, - series:{ - name:'', - type: 'line', - smooth: true, - symbol:'none', - lineStyle:{ - color:'#007aff', - width:1 - }, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgba(4,228,243,0.7)' - }, - { - offset: 1, - color: 'rgba(18,51,114,0.5)' - } - ]) - }, - }, - grid:{ - width:'90%', - height:'80%', - top:'8%', - left:'6%', - } -}; -//日期列表 -const dateList = ref() -const dateValue = ref() -const getDate = async () =>{ - await sysDictData().searchType('date_type').then((res)=>{ - dateList.value = res.data - dateList.value.forEach((item,index)=>{ - if(index === 0){ - item.active = 1 - }else{ - item.active = 0 - } - item.dictLabel = item.dictLabel.replace('统计','') - }) - dateValue.value = dateList.value[0].dictValue - }) -} -//选中日期 -const changeDate = (dateType) =>{ - dateValue.value = dateType - dateList.value.forEach((item)=>{ - item.active = 0 - if(item.dictValue === dateType){ - item.active = 1 - } - }) - // getData({dateType:dateValue.value,pointId:pointId.value}) -} -//监控点列表 -const pointList = ref([]) -const pointId = ref(); -// const getPointList = async() =>{- - -// //区域列表 -// let res = await pointApi().search({limit: 100, page: 1}); -// if(res.code == 200){ -// pointList.value = res.data.list -// pointId.value = pointList.value[0].id -// console.log("获取监控点数据",pointList.value); -// }else{ -// proxy.$modal.msgError('获取数据失败,请刷新再试!') -// } -// } -//选中数据 -const searchPoint = () =>{ - getData({dateType:dateValue.value,pointId:pointId.value}) -} -//请求数据 -let loadingE = { - text: 'loading', - textColor: 'rgba(105,133,219, 1)', - maskColor: 'rgba(202, 224, 252, 0.2)', - fontSize: '20px', -} -const loadingEcharts = () =>{ - echartsOne.showLoading(loadingE) - echartsTwo.showLoading(loadingE) - echartsThree.showLoading(loadingE) - echartsFour.showLoading(loadingE) - - - // pressureOneEcharts.showLoading(loadingE) - // pressureTwoEcharts.showLoading(loadingE) - // pressureThreeEcharts.showLoading(loadingE) - - // liquidOneEcharts.showLoading(loadingE) - // liquidTwoEcharts.showLoading(loadingE) - // liquidThreeEcharts.showLoading(loadingE) - - // flowOneEcharts.showLoading(loadingE) - // flowTwoEcharts.showLoading(loadingE) - // flowThreeEcharts.showLoading(loadingE) -} -const hideEcharts = () =>{ - - echartsOne.hideLoading() - echartsTwo.hideLoading() - echartsThree.hideLoading() - echartsFour.hideLoading() - - // pressureOneEcharts.hideLoading() - // pressureTwoEcharts.hideLoading() - // pressureThreeEcharts.hideLoading() - - // liquidOneEcharts.hideLoading() - // liquidTwoEcharts.hideLoading() - // liquidThreeEcharts.hideLoading() - - // flowOneEcharts.hideLoading() - // flowTwoEcharts.hideLoading() - // flowThreeEcharts.hideLoading() -} -// let pressureOneData = [] -// let pressureTwoData = [] -// let pressureThreeData = [] -// let liquidOneData = [] -// let liquidTwoData = [] -// let liquidThreeData = [] -// let flowOneData = [] -// let flowTwoData = [] -// let flowThreeData = [] -// let dataOne = [] -// let dataTwo = [] -// let dataThree = [] -// let dataFour = [] -let title = ref(['','','','']) -let data = [[],[],[],[]] -const getData = async (val) =>{ - loadingEcharts() - if(!val){ - val = {dateType:dateValue.value,pointId:pointId.value} - } - await statistics().search(val).then((res) =>{ - hideEcharts() - data = [[],[],[],[]] - Object.keys(res.data).forEach((key,index)=>{ - title.value[index] = key - res.data[key].forEach((item)=>{ - data[index].push({uploadTimeView:item.uploadTimeView,columnsValue:item.columnsValue}) - }) - }) - }) - setOptions() -} -const setOptions = () =>{ - - let option1 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - option1.dataset.source = data[0]; // 修改数据 - option1.series.name = title.value[0]; // 修改数据 - echartsOne.setOption(option1); - - let option2 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - option2.dataset.source = data[1]; // 修改数据 - option2.series.name = title.value[1]; // 修改数据 - console.log('title',title.value[1]) - echartsTwo.setOption(option2); - - let option3 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - option3.dataset.source = data[2]; // 修改数据 - option3.series.name = title.value[2]; // 修改数据 - echartsThree.setOption(option3); - - let option4 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - option4.dataset.source = data[3]; // 修改数据 - option4.series.name = title.value[3]; // 修改数据 - echartsFour.setOption(option4); - - // let option1 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - // option1.dataset.source = pressureOneData; // 修改数据 - // option1.series.name = '压力'; // 修改数据 - // pressureOneEcharts.setOption(option1); - - // let option2 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - // option2.dataset.source = pressureTwoData; // 修改数据 - // option2.series.name = '压力'; // 修改数据 - // pressureTwoEcharts.setOption(option2); - - // let option3 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - // option3.dataset.source = pressureThreeData; // 修改数据 - // option3.series.name = '压力'; // 修改数据 - // pressureThreeEcharts.setOption(option3); - - // let option4 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - // option4.dataset.source = liquidOneData; // 修改数据 - // option4.series.name = '液位'; // 修改数据 - // liquidOneEcharts.setOption(option4); - - // let option5 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - // option5.dataset.source = liquidTwoData; // 修改数据 - // option5.series.name = '液位'; // 修改数据 - // liquidTwoEcharts.setOption(option5); - - // let option6 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - // option6.dataset.source = liquidThreeData; // 修改数据 - // option6.series.name = '液位'; // 修改数据 - // liquidThreeEcharts.setOption(option6); - - // let option7 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - // option7.dataset.source = flowOneData; // 修改数据 - // option7.series.name = '流量'; // 修改数据 - // flowOneEcharts.setOption(option7); - - // let option8 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - // option8.dataset.source = flowTwoData; // 修改数据 - // option8.series.name = '流量'; // 修改数据 - // flowTwoEcharts.setOption(option8); - - // let option9 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option - // option9.dataset.source = flowThreeData; // 修改数据 - // option9.series.name = '流量'; // 修改数据 - // flowThreeEcharts.setOption(option9); -} -window.addEventListener('resize', function() { - - echartsOne.resize() - echartsTwo.resize() - echartsThree.resize() - echartsFour.resize() - - // pressureOneEcharts.resize() - // pressureTwoEcharts.resize() - // pressureThreeEcharts.resize() - - // liquidOneEcharts.resize() - // liquidTwoEcharts.resize() - // liquidThreeEcharts.resize() - - // flowOneEcharts.resize() - // flowTwoEcharts.resize() - // flowThreeEcharts.resize() -}); -onMounted(async ()=>{ - initEcharts() - // await getPointList() - await getDate() - // await getData({dateType:dateValue.value,pointId:pointId.value}) - setOptions() -}) -//卸载前销毁图表 -const disposeEcharts = (echarts) => { - if (echarts) { - echarts.dispose(); - echarts = null; - } -} -onBeforeUnmount(async ()=> { - - disposeEcharts(echartsOne) - disposeEcharts(echartsTwo) - disposeEcharts(echartsThree) - disposeEcharts(echartsFour) - - // disposeEcharts(pressureOneEcharts) - // disposeEcharts(pressureTwoEcharts) - // disposeEcharts(pressureThreeEcharts) - // disposeEcharts(liquidOneEcharts) - // disposeEcharts(liquidTwoEcharts) - // disposeEcharts(liquidThreeEcharts) - // disposeEcharts(flowOneEcharts) - // disposeEcharts(flowTwoEcharts) - // disposeEcharts(flowThreeEcharts) -}) -</script> - -<style lang="scss" scoped> - .date{ - position: absolute; - width: 12.4%; - height: 6.1%; - background-image: url("../../../assets/images/screen/statistics/date.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - top: 1%; - right:3%; - display: flex; - align-items: center; - justify-content:center; - font-weight: 400; - font-size: 18px; - color: #DDDDDD; - div{ - width: 25%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - .date-active{ - background-image: url("../../../assets/images/screen/statistics/select-date.png"); - } - } -.statistics{ - width: 100%; - height: 100%; - .container{ - width: 100%; - height: 100%; - display: flex; - flex-wrap:wrap; - justify-content: space-between; - align-items: center; - padding:2%; - box-sizing: border-box; - position: relative; - .echarts{ - width:33%; - height:45%; - background-image: url("../../../assets/images/screen/statistics/echarts-box.png"); - background-repeat: no-repeat; - background-size: 100% 100%; - // margin-bottom:50px; - div:first-child{ - width:100%; - height:14%; - background-image: url("../../../assets/images/screen/statistics/title-icon.png"); - background-repeat: no-repeat; - background-size:5.8% 52%; - background-position:40% 50%; - display: flex; - justify-content: center; - align-items: center; - padding-left:6%; - span{ - font-weight: 400; - font-size: 18px; - color: #FFFFFF; - text-align: center; - } - } - div:last-child{ - width:100%; - height:86%; - } - } - - .search{ - width:12.2%; - height:4%; - display: flex; - align-items: center; - justify-content: flex-start; - position: absolute; - right:3%; - top:9%; - .search-select{ - height:100%; - width: 80%; - :deep(.el-select__wrapper){ - height: 100%; - width: 100%; - background:transparent !important; - border: 1px solid #1fb0be !important; - border-radius: 5px 0 0 5px; - } - } - .search-btn{ - height:100%; - width: 20%; - border-radius:5px; - background: #2a6bb6; - font-weight: 400; - font-size: 16px; - color: #B9F9FF; - margin-left:5px; - } - } - } -} -</style> \ No newline at end of file diff --git a/src/views/screen/temperature/home/index.vue b/src/views/screen/temperature/home/index.vue new file mode 100644 index 0000000..8ba481c --- /dev/null +++ b/src/views/screen/temperature/home/index.vue @@ -0,0 +1,102 @@ +<template> + <div class="home"> + <div class="home-bg"></div> + <div class="home-c"> + <div class="point"> + <div class="point-address"></div> + <div class="point-message"> + <div class="msg-t">电站尾水出口水温监测点</div> + <div class="num"> + <div class="item"> + <div class="item-t">水温:</div> + <div class="item-num"><span>10</span>°C</div> + </div> + <div class="item"> + <div class="item-t">水位:</div> + <div class="item-num"><span>1000</span>m</div> + </div> + </div> + <div class="shebei"> + 监测设备: <span>监测设备运行正常(点击跳转)</span> + </div> + </div> + </div> + </div> + </div> +</template> + + +<script setup> + +</script> + + +<style scoped lang="scss"> +.home{ + height: 100%; + .home-bg{ + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: url("@/assets/images/map-bg.png") no-repeat; + background-size: 100% 100%; + z-index: -1; + } + .home-c{ + width: 100%; + height: 100%; + position: relative; + .point{ + position: absolute; + left: 58%; + bottom: 10%; + .point-address{ + width: 35px; + height: 40px; + background: url("@/assets/images/point.png") no-repeat; + background-size: 100% 100%; + } + .point-message{ + width: 500px; + height: 200px; + background: url("@/assets/images/messageInfo-box.png") no-repeat; + background-size: 100% 100%; + position: absolute; + left: -500px; + top: -100px; + padding: 30px 50px; + color: #fff; + display: flex; + flex-direction: column; + justify-content: space-between; + .msg-t{ + font-size: 26px; + font-weight: bold; + } + .num{ + display: flex; + align-items: center; + gap: 50px; + .item{ + display: flex; + align-items: center; + span{ + display: inline-block; + padding: 0 30px; + font-size: 22px; + font-weight: bold; + } + } + } + .shebei{ + span{ + color: #1ab394; + } + } + } + } + } +} +</style> \ No newline at end of file diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue index 3a7edf9..85e27a5 100644 --- a/src/views/system/dict/index.vue +++ b/src/views/system/dict/index.vue @@ -2,7 +2,7 @@ <script setup name="Post"> import { sysDictType,sysDictData} from "@/api/system/dict"; import { onMounted } from "vue"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); const loading = ref(true); //加载状态 diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue index cda46d2..5b1e221 100644 --- a/src/views/system/menu/index.vue +++ b/src/views/system/menu/index.vue @@ -54,7 +54,7 @@ </template> </el-table-column> <el-table-column prop="sort" label="排序"></el-table-column> - <el-table-column label="操作" align="center" class-name="small-padding fixed-width" :fixed="right"> + <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template #default="scope"> <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-has="['update',route]">修改 @@ -197,9 +197,9 @@ async function getList(val) { loading.value = true; if (val) { - val.limit = 10000 + val.limit = 100 } else { - val = {limit: 10000} + val = {limit: 100} } await menu().get(val).then((res) => { menuList.value = proxy.handleTree(res.data.list, "id"); diff --git a/src/views/system/permission/index.vue b/src/views/system/permission/index.vue index 97928d2..d36c5d9 100644 --- a/src/views/system/permission/index.vue +++ b/src/views/system/permission/index.vue @@ -93,7 +93,7 @@ import permission from "@/api/system/permission"; import { DictType } from "@/api/system/dict"; import menu from "@/api/system/menu"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue index c4377b8..c52e7e4 100644 --- a/src/views/system/role/index.vue +++ b/src/views/system/role/index.vue @@ -124,7 +124,7 @@ import menu from "@/api/system/menu"; import permission from "@/api/system/permission"; import { useRoute } from "vue-router"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); let route = useRoute() @@ -305,7 +305,7 @@ menuTreeListLength.value = countTreeNodes(menuTreeList.value) }) - await permission().search({limit:10000}).then((res) =>{ + await permission().search({limit:100}).then((res) =>{ permissionList.value = res.data.list }) } diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue index 1d93195..f813cbb 100644 --- a/src/views/system/user/index.vue +++ b/src/views/system/user/index.vue @@ -134,7 +134,7 @@ import { PREURL } from "@/config/index"; import userClassify from "@/api/configuration/userClassify"; import { sysDictData } from "@/api/system/dict"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** @@ -306,7 +306,7 @@ //获取用户角色列表 const getUserRole = async() =>{ - await role().search({limit:1000,page:1}).then((res) =>{ + await role().search({limit:100,page:1}).then((res) =>{ roleSelectList.value = res.data.list }) } diff --git a/src/views/waterMeter/meterOperation/index.vue b/src/views/waterMeter/meterOperation/index.vue index 5795dae..cd10591 100644 --- a/src/views/waterMeter/meterOperation/index.vue +++ b/src/views/waterMeter/meterOperation/index.vue @@ -10,7 +10,7 @@ <script setup> import meterOperationApi from "@/api/waterMeterApi/meterOperation"; import { nameReg ,phoneReg } from "@/utils/regular"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); diff --git a/src/views/waterMeter/supplier/index.vue b/src/views/waterMeter/supplier/index.vue index 3694966..848b71b 100644 --- a/src/views/waterMeter/supplier/index.vue +++ b/src/views/waterMeter/supplier/index.vue @@ -10,7 +10,7 @@ <script setup> import supplierApi from "@/api/waterMeterApi/supplier"; import { nameReg ,phoneReg } from "@/utils/regular"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); diff --git a/src/views/waterMeter/useWaterMeter/index.vue b/src/views/waterMeter/useWaterMeter/index.vue index ab40dfc..7456310 100644 --- a/src/views/waterMeter/useWaterMeter/index.vue +++ b/src/views/waterMeter/useWaterMeter/index.vue @@ -11,7 +11,7 @@ import useWaterMeterApi from "@/api/waterMeterApi/useWaterMeter"; import { nameReg ,phoneReg } from "@/utils/regular"; import {useRoute} from "vue-router"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const route = useRoute() const { proxy } = getCurrentInstance(); diff --git a/src/views/waterMeter/verification/index.vue b/src/views/waterMeter/verification/index.vue index 2076924..8a9c547 100644 --- a/src/views/waterMeter/verification/index.vue +++ b/src/views/waterMeter/verification/index.vue @@ -10,7 +10,7 @@ <script setup> import verificationApi from "@/api/waterMeterApi/verification"; import { nameReg ,phoneReg } from "@/utils/regular"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); diff --git a/src/views/waterMeter/waterModel/index.vue b/src/views/waterMeter/waterModel/index.vue index 1e4b821..c582223 100644 --- a/src/views/waterMeter/waterModel/index.vue +++ b/src/views/waterMeter/waterModel/index.vue @@ -9,7 +9,7 @@ <script setup> import waterModelApi from "@/api/waterMeterApi/waterModel"; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; const {proxy} = getCurrentInstance(); diff --git a/src/views/workOrderManage/meterConstruction/index.vue b/src/views/workOrderManage/meterConstruction/index.vue index d42ad08..a627c4b 100644 --- a/src/views/workOrderManage/meterConstruction/index.vue +++ b/src/views/workOrderManage/meterConstruction/index.vue @@ -5,7 +5,7 @@ import { ElMessage } from 'element-plus' // import waterMeterApi from "@/api/waterMeterApi/index"; import meterConstructionApi from '@/api/workOrderManage/meterConstructionApi/index'; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; // import billRecord from "@/api/financial/billRecord/index"; const { proxy } = getCurrentInstance(); diff --git a/src/views/workOrderManage/waterMeterAlteration/index.vue b/src/views/workOrderManage/waterMeterAlteration/index.vue index 0d34d16..ee2f3e3 100644 --- a/src/views/workOrderManage/waterMeterAlteration/index.vue +++ b/src/views/workOrderManage/waterMeterAlteration/index.vue @@ -11,7 +11,7 @@ import TieredCharging from "@/api/configuration/waterPrice"; import {waterMeterAlterationApi} from '@/api/workOrderManage/waterMeterAlterationApi'; import {PREURL} from '@/config/index'; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); //定义table数据 const queryParams = ref({ diff --git a/src/views/workOrderManage/waterMeterChange/index.vue b/src/views/workOrderManage/waterMeterChange/index.vue index 7932a18..aec0531 100644 --- a/src/views/workOrderManage/waterMeterChange/index.vue +++ b/src/views/workOrderManage/waterMeterChange/index.vue @@ -7,7 +7,7 @@ import waterMeterApi from "@/api/waterMeterApi/index"; import { waterMeterChangeApi } from '@/api/workOrderManage/waterMeterChangeApi/index'; import billRecord from "@/api/financial/billRecord/index"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/workOrderManage/waterMeterCloseAccount/index.vue b/src/views/workOrderManage/waterMeterCloseAccount/index.vue index 9ca5ae7..daa0f83 100644 --- a/src/views/workOrderManage/waterMeterCloseAccount/index.vue +++ b/src/views/workOrderManage/waterMeterCloseAccount/index.vue @@ -7,7 +7,7 @@ import waterMeterApi from "@/api/waterMeterApi/index"; import { waterMeterCloseAccountApi } from '@/api/workOrderManage/waterMeterCloseAccountApi/index'; import billRecord from "@/api/financial/billRecord/index"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/workOrderManage/waterMeterMaintainRecords/index.vue b/src/views/workOrderManage/waterMeterMaintainRecords/index.vue index eb06b6d..e97e7c7 100644 --- a/src/views/workOrderManage/waterMeterMaintainRecords/index.vue +++ b/src/views/workOrderManage/waterMeterMaintainRecords/index.vue @@ -5,7 +5,7 @@ import { ElMessage } from 'element-plus' // import waterMeterApi from "@/api/waterMeterApi/index"; import { waterMeterMaintainRecordsApi } from '@/api/workOrderManage/waterMeterMaintainRecordsApi/index'; -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; // import billRecord from "@/api/financial/billRecord/index"; const { proxy } = getCurrentInstance(); diff --git a/src/views/workOrderManage/waterMeterRepair/index.vue b/src/views/workOrderManage/waterMeterRepair/index.vue index 3ae70ca..98a7ebf 100644 --- a/src/views/workOrderManage/waterMeterRepair/index.vue +++ b/src/views/workOrderManage/waterMeterRepair/index.vue @@ -6,7 +6,7 @@ import waterMeterApi from "@/api/waterMeterApi/index"; import { waterMeterRepairApi } from '@/api/workOrderManage/waterMeterRepairApi'; import { onMounted, reactive, ref } from 'vue' -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; //定义table数据 const queryParams = ref({ name: undefined, diff --git a/src/views/workOrderManage/waterMeterStopAccount/index.vue b/src/views/workOrderManage/waterMeterStopAccount/index.vue index 943cb47..a8d6f85 100644 --- a/src/views/workOrderManage/waterMeterStopAccount/index.vue +++ b/src/views/workOrderManage/waterMeterStopAccount/index.vue @@ -6,7 +6,7 @@ import waterMeterApi from "@/api/waterMeterApi/index"; import { waterMeterStopAccountApi } from '@/api/workOrderManage/waterMeterStopAccountApi/index'; import billRecord from "@/api/financial/billRecord/index"; - import setPostParams from "../../../utils/searchParams.js"; + import setPostParams from "@/utils/searchParams.js"; const { proxy } = getCurrentInstance(); /** diff --git a/src/views/workOrderManage/workOrderList/index.vue b/src/views/workOrderManage/workOrderList/index.vue index 5465ad6..9398874 100644 --- a/src/views/workOrderManage/workOrderList/index.vue +++ b/src/views/workOrderManage/workOrderList/index.vue @@ -64,7 +64,7 @@ import accountApply from '@/views/workOrderManage/accountApply/index.vue' import { waterMeterApplyApi } from '@/api/workOrderManage/waterMeterApplyApi/index' import { ElMessage } from 'element-plus' -import setPostParams from "../../../utils/searchParams.js"; +import setPostParams from "@/utils/searchParams.js"; //定义变量内容 const queryParams = ref({ diff --git a/vite.config.js b/vite.config.js index 95a3cb8..622c954 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,11 +1,3 @@ -/* - * @Author: elkers dmhe0357 - * @Date: 2024-10-02 12:49:11 - * @LastEditors: Liuyi candymxq888@outlook.com - * @LastEditTime: 2024-11-09 09:44:02 - * @FilePath: \water-qinghe-web\vite.config.js - * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE - */ import { defineConfig, loadEnv } from 'vite' import path from 'path' import createVitePlugins from './vite/plugins' -- Gitblit v1.9.3