Browse Source

图表详情增加天气数据图表

develop
fuguobin 11 months ago
parent
commit
3eaa9c6be7
  1. 13
      src/api/device/index.ts
  2. 2
      src/api/device/types.ts
  3. 1090
      src/assets/iconfont/demo_index.html
  4. 216
      src/assets/iconfont/iconfont.css
  5. 2
      src/assets/iconfont/iconfont.js
  6. 446
      src/assets/iconfont/iconfont.json
  7. BIN
      src/assets/iconfont/iconfont.ttf
  8. BIN
      src/assets/iconfont/iconfont.woff
  9. BIN
      src/assets/iconfont/iconfont.woff2
  10. 2
      src/types/auto-imports.d.ts
  11. 10
      src/views/details/index.scss
  12. 87
      src/views/details/index.vue
  13. 50
      src/views/monitoring/components/header.vue
  14. 4
      src/views/monitoring/screen/components/main.vue
  15. 4
      vite.config.ts

13
src/api/device/index.ts

@ -116,3 +116,16 @@ export function getDeviceInfos(data: any) {
data: data
});
}
/**
*
*
* @param data
*/
export function weatherHoursList(data: any) {
return request({
url: '/dc/dcDeviceEcharts/weatherHoursList',
method: 'post',
data: data
});
}

2
src/api/device/types.ts

@ -99,5 +99,7 @@ export interface mainInfoVo {
paramUnit: string;
index: number;
average: number;
max?: number;
min?: number;
data: [];
}

1090
src/assets/iconfont/demo_index.html

File diff suppressed because it is too large

216
src/assets/iconfont/iconfont.css

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3987011 */
src: url('iconfont.woff2?t=1699254830523') format('woff2'),
url('iconfont.woff?t=1699254830523') format('woff'),
url('iconfont.ttf?t=1699254830523') format('truetype');
font-family: "iconfont"; /* Project id 4223894 */
src: url('iconfont.woff2?t=1703727917505') format('woff2'),
url('iconfont.woff?t=1703727917505') format('woff'),
url('iconfont.ttf?t=1703727917505') format('truetype');
}
.iconfont {
@ -13,56 +13,44 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-station:before {
content: "\e6c5";
.icon-weather:before {
content: "\e601";
}
.icon-list:before {
content: "\e6be";
.icon-alarm:before {
content: "\e871";
}
.icon-more:before {
content: "\e83d";
.icon-four-screen:before {
content: "\e86a";
}
.icon-edit-icon:before {
content: "\e621";
.icon-one-screen:before {
content: "\e600";
}
.icon-arrow-up:before {
content: "\e845";
.icon-nine-screen:before {
content: "\e65f";
}
.icon-rise:before {
content: "\e8f8";
.icon-history:before {
content: "\e611";
}
.icon-decline:before {
content: "\e8f9";
}
.icon-angle-double:before {
content: "\e849";
}
.icon-visits-chart:before {
content: "\e6a5";
}
.icon-user-visits:before {
content: "\e651";
.icon-station:before {
content: "\e6c5";
}
.icon-turnover:before {
content: "\ec18";
.icon-more:before {
content: "\e83d";
}
.icon-num-transactions:before {
content: "\e682";
.icon-list:before {
content: "\e6be";
}
.icon-num-download:before {
content: "\e6f8";
.icon-key:before {
content: "\e775";
}
.icon-user-mgt:before {
@ -105,76 +93,48 @@
content: "\e645";
}
.icon-key:before {
content: "\e775";
}
.icon-safe-code:before {
content: "\e627";
}
.icon-safe:before {
content: "\ec4d";
}
.icon-other:before {
content: "\e60b";
}
.icon-page-right:before {
content: "\e65b";
}
.icon-search:before {
content: "\e63c";
}
.icon-setup:before {
content: "\eb8d";
}
.icon-reset:before {
content: "\e614";
.icon-visits-chart:before {
content: "\e6a5";
}
.icon-camera:before {
content: "\e666";
.icon-user-visits:before {
content: "\e651";
}
.icon-qrcode:before {
content: "\e6b0";
.icon-turnover:before {
content: "\ec18";
}
.icon-delete:before {
content: "\e6b4";
.icon-num-transactions:before {
content: "\e682";
}
.icon-address:before {
content: "\e652";
.icon-num-download:before {
content: "\e6f8";
}
.icon-clock:before {
content: "\e890";
.icon-edit-icon:before {
content: "\e621";
}
.icon-location:before {
content: "\e63d";
.icon-user:before {
content: "\e828";
}
.icon-scan:before {
content: "\e68b";
.icon-lock:before {
content: "\e62a";
}
.icon-edit:before {
content: "\e6aa";
.icon-language:before {
content: "\e739";
}
.icon-page-left:before {
content: "\e659";
.icon-arrow-down:before {
content: "\e688";
}
.icon-font-size:before {
content: "\e689";
.icon-close:before {
content: "\e668";
}
.icon-filter:before {
@ -225,23 +185,87 @@
content: "\e624";
}
.icon-close:before {
content: "\e668";
.icon-font-size:before {
content: "\e689";
}
.icon-arrow-down:before {
content: "\e688";
.icon-page-left:before {
content: "\e659";
}
.icon-language:before {
content: "\e739";
.icon-scan:before {
content: "\e68b";
}
.icon-lock:before {
content: "\e62a";
.icon-edit:before {
content: "\e6aa";
}
.icon-user:before {
content: "\e828";
.icon-camera:before {
content: "\e666";
}
.icon-qrcode:before {
content: "\e6b0";
}
.icon-delete:before {
content: "\e6b4";
}
.icon-address:before {
content: "\e652";
}
.icon-clock:before {
content: "\e890";
}
.icon-location:before {
content: "\e63d";
}
.icon-setup:before {
content: "\eb8d";
}
.icon-reset:before {
content: "\e614";
}
.icon-search:before {
content: "\e63c";
}
.icon-page-right:before {
content: "\e65b";
}
.icon-other:before {
content: "\e60b";
}
.icon-safe:before {
content: "\ec4d";
}
.icon-safe-code:before {
content: "\e627";
}
.icon-up:before {
content: "\e845";
}
.icon-angle-double:before {
content: "\e849";
}
.icon-rise:before {
content: "\e8f8";
}
.icon-decline:before {
content: "\e8f9";
}

2
src/assets/iconfont/iconfont.js

File diff suppressed because one or more lines are too long

446
src/assets/iconfont/iconfont.json

@ -1,100 +1,79 @@
{
"id": "3987011",
"name": "vue3后台管理系统",
"id": "4223894",
"name": "浑南热力",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "18911700",
"name": "换热站",
"font_class": "station",
"unicode": "e6c5",
"unicode_decimal": 59077
},
{
"icon_id": "8474293",
"name": "list",
"font_class": "list",
"unicode": "e6be",
"unicode_decimal": 59070
},
{
"icon_id": "34453016",
"name": "more",
"font_class": "more",
"unicode": "e83d",
"unicode_decimal": 59453
},
{
"icon_id": "33987167",
"name": "编辑",
"font_class": "edit-icon",
"unicode": "e621",
"unicode_decimal": 58913
"icon_id": "1447",
"name": "多云",
"font_class": "weather",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "34453072",
"name": "up",
"font_class": "arrow-up",
"unicode": "e845",
"unicode_decimal": 59461
"icon_id": "18164959",
"name": "报警,警报,报警灯,危险",
"font_class": "alarm",
"unicode": "e871",
"unicode_decimal": 59505
},
{
"icon_id": "1727559",
"name": "323向左交换",
"font_class": "rise",
"unicode": "e8f8",
"unicode_decimal": 59640
"icon_id": "18164825",
"name": "分屏,宫格",
"font_class": "four-screen",
"unicode": "e86a",
"unicode_decimal": 59498
},
{
"icon_id": "1727561",
"name": "324向右交换",
"font_class": "decline",
"unicode": "e8f9",
"unicode_decimal": 59641
"icon_id": "1278",
"name": "单图排列",
"font_class": "one-screen",
"unicode": "e600",
"unicode_decimal": 58880
},
{
"icon_id": "6151391",
"name": "angle-double-up",
"font_class": "angle-double",
"unicode": "e849",
"unicode_decimal": 59465
"icon_id": "9773647",
"name": "homepage",
"font_class": "nine-screen",
"unicode": "e65f",
"unicode_decimal": 58975
},
{
"icon_id": "6033101",
"name": "访问量",
"font_class": "visits-chart",
"unicode": "e6a5",
"unicode_decimal": 59045
"icon_id": "8821264",
"name": "历史-01",
"font_class": "history",
"unicode": "e611",
"unicode_decimal": 58897
},
{
"icon_id": "7956168",
"name": "总访问量",
"font_class": "user-visits",
"unicode": "e651",
"unicode_decimal": 58961
"icon_id": "18911700",
"name": "换热站",
"font_class": "station",
"unicode": "e6c5",
"unicode_decimal": 59077
},
{
"icon_id": "26442901",
"name": "订单成交额",
"font_class": "turnover",
"unicode": "ec18",
"unicode_decimal": 60440
"icon_id": "34453016",
"name": "more",
"font_class": "more",
"unicode": "e83d",
"unicode_decimal": 59453
},
{
"icon_id": "26908793",
"name": "成交数据-01",
"font_class": "num-transactions",
"unicode": "e682",
"unicode_decimal": 59010
"icon_id": "8474293",
"name": "list",
"font_class": "list",
"unicode": "e6be",
"unicode_decimal": 59070
},
{
"icon_id": "31500093",
"name": "下载数量",
"font_class": "num-download",
"unicode": "e6f8",
"unicode_decimal": 59128
"icon_id": "6150969",
"name": "key",
"font_class": "key",
"unicode": "e775",
"unicode_decimal": 59253
},
{
"icon_id": "1348257",
@ -167,130 +146,81 @@
"unicode_decimal": 58949
},
{
"icon_id": "6150969",
"name": "key",
"font_class": "key",
"unicode": "e775",
"unicode_decimal": 59253
},
{
"icon_id": "1599882",
"name": "网商银行无线端_安全",
"font_class": "safe-code",
"unicode": "e627",
"unicode_decimal": 58919
},
{
"icon_id": "5961299",
"name": "安全",
"font_class": "safe",
"unicode": "ec4d",
"unicode_decimal": 60493
},
{
"icon_id": "13106274",
"name": "其他",
"font_class": "other",
"unicode": "e60b",
"unicode_decimal": 58891
},
{
"icon_id": "8777535",
"name": "page_last",
"font_class": "page-right",
"unicode": "e65b",
"unicode_decimal": 58971
},
{
"icon_id": "8776842",
"name": "search",
"font_class": "search",
"unicode": "e63c",
"unicode_decimal": 58940
},
{
"icon_id": "4347549",
"name": "icon_设置",
"font_class": "setup",
"unicode": "eb8d",
"unicode_decimal": 60301
},
{
"icon_id": "27253675",
"name": "重置",
"font_class": "reset",
"unicode": "e614",
"unicode_decimal": 58900
"icon_id": "6033101",
"name": "访问量",
"font_class": "visits-chart",
"unicode": "e6a5",
"unicode_decimal": 59045
},
{
"icon_id": "30414",
"name": "camera",
"font_class": "camera",
"unicode": "e666",
"unicode_decimal": 58982
"icon_id": "7956168",
"name": "总访问量",
"font_class": "user-visits",
"unicode": "e651",
"unicode_decimal": 58961
},
{
"icon_id": "32472",
"name": "qr_code",
"font_class": "qrcode",
"unicode": "e6b0",
"unicode_decimal": 59056
"icon_id": "26442901",
"name": "订单成交额",
"font_class": "turnover",
"unicode": "ec18",
"unicode_decimal": 60440
},
{
"icon_id": "32477",
"name": "delete",
"font_class": "delete",
"unicode": "e6b4",
"unicode_decimal": 59060
"icon_id": "26908793",
"name": "成交数据-01",
"font_class": "num-transactions",
"unicode": "e682",
"unicode_decimal": 59010
},
{
"icon_id": "658000",
"name": "地址",
"font_class": "address",
"unicode": "e652",
"unicode_decimal": 58962
"icon_id": "31500093",
"name": "下载数量",
"font_class": "num-download",
"unicode": "e6f8",
"unicode_decimal": 59128
},
{
"icon_id": "2076264",
"name": "闹钟",
"font_class": "clock",
"unicode": "e890",
"unicode_decimal": 59536
"icon_id": "33987167",
"name": "编辑",
"font_class": "edit-icon",
"unicode": "e621",
"unicode_decimal": 58913
},
{
"icon_id": "9690751",
"name": "地址",
"font_class": "location",
"unicode": "e63d",
"unicode_decimal": 58941
"icon_id": "34452814",
"name": "customer-fill",
"font_class": "user",
"unicode": "e828",
"unicode_decimal": 59432
},
{
"icon_id": "16617390",
"name": "scan",
"font_class": "scan",
"unicode": "e68b",
"unicode_decimal": 59019
"icon_id": "611345",
"name": "密码",
"font_class": "lock",
"unicode": "e62a",
"unicode_decimal": 58922
},
{
"icon_id": "16618154",
"name": "edit",
"font_class": "edit",
"unicode": "e6aa",
"unicode_decimal": 59050
"icon_id": "31061118",
"name": "中英切换",
"font_class": "language",
"unicode": "e739",
"unicode_decimal": 59193
},
{
"icon_id": "8777532",
"name": "page_first",
"font_class": "page-left",
"unicode": "e659",
"unicode_decimal": 58969
"icon_id": "15838582",
"name": "arrow-down-filling",
"font_class": "arrow-down",
"unicode": "e688",
"unicode_decimal": 59016
},
{
"icon_id": "24502124",
"name": "字体大小",
"font_class": "font-size",
"unicode": "e689",
"unicode_decimal": 59017
"icon_id": "15838444",
"name": "close",
"font_class": "close",
"unicode": "e668",
"unicode_decimal": 58984
},
{
"icon_id": "8777080",
@ -377,39 +307,151 @@
"unicode_decimal": 58916
},
{
"icon_id": "15838444",
"name": "close",
"font_class": "close",
"unicode": "e668",
"unicode_decimal": 58984
"icon_id": "24502124",
"name": "字体大小",
"font_class": "font-size",
"unicode": "e689",
"unicode_decimal": 59017
},
{
"icon_id": "15838582",
"name": "arrow-down-filling",
"font_class": "arrow-down",
"unicode": "e688",
"unicode_decimal": 59016
"icon_id": "8777532",
"name": "page_first",
"font_class": "page-left",
"unicode": "e659",
"unicode_decimal": 58969
},
{
"icon_id": "31061118",
"name": "中英切换",
"font_class": "language",
"unicode": "e739",
"unicode_decimal": 59193
"icon_id": "16617390",
"name": "scan",
"font_class": "scan",
"unicode": "e68b",
"unicode_decimal": 59019
},
{
"icon_id": "611345",
"name": "密码",
"font_class": "lock",
"unicode": "e62a",
"unicode_decimal": 58922
"icon_id": "16618154",
"name": "edit",
"font_class": "edit",
"unicode": "e6aa",
"unicode_decimal": 59050
},
{
"icon_id": "34452814",
"name": "customer-fill",
"font_class": "user",
"unicode": "e828",
"unicode_decimal": 59432
"icon_id": "30414",
"name": "camera",
"font_class": "camera",
"unicode": "e666",
"unicode_decimal": 58982
},
{
"icon_id": "32472",
"name": "qr_code",
"font_class": "qrcode",
"unicode": "e6b0",
"unicode_decimal": 59056
},
{
"icon_id": "32477",
"name": "delete",
"font_class": "delete",
"unicode": "e6b4",
"unicode_decimal": 59060
},
{
"icon_id": "658000",
"name": "地址",
"font_class": "address",
"unicode": "e652",
"unicode_decimal": 58962
},
{
"icon_id": "2076264",
"name": "闹钟",
"font_class": "clock",
"unicode": "e890",
"unicode_decimal": 59536
},
{
"icon_id": "9690751",
"name": "地址",
"font_class": "location",
"unicode": "e63d",
"unicode_decimal": 58941
},
{
"icon_id": "4347549",
"name": "icon_设置",
"font_class": "setup",
"unicode": "eb8d",
"unicode_decimal": 60301
},
{
"icon_id": "27253675",
"name": "重置",
"font_class": "reset",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "8776842",
"name": "search",
"font_class": "search",
"unicode": "e63c",
"unicode_decimal": 58940
},
{
"icon_id": "8777535",
"name": "page_last",
"font_class": "page-right",
"unicode": "e65b",
"unicode_decimal": 58971
},
{
"icon_id": "13106274",
"name": "其他",
"font_class": "other",
"unicode": "e60b",
"unicode_decimal": 58891
},
{
"icon_id": "5961299",
"name": "安全",
"font_class": "safe",
"unicode": "ec4d",
"unicode_decimal": 60493
},
{
"icon_id": "1599882",
"name": "网商银行无线端_安全",
"font_class": "safe-code",
"unicode": "e627",
"unicode_decimal": 58919
},
{
"icon_id": "34453072",
"name": "up",
"font_class": "up",
"unicode": "e845",
"unicode_decimal": 59461
},
{
"icon_id": "6151391",
"name": "angle-double-up",
"font_class": "angle-double",
"unicode": "e849",
"unicode_decimal": 59465
},
{
"icon_id": "1727559",
"name": "323向左交换",
"font_class": "rise",
"unicode": "e8f8",
"unicode_decimal": 59640
},
{
"icon_id": "1727561",
"name": "324向右交换",
"font_class": "decline",
"unicode": "e8f9",
"unicode_decimal": 59641
}
]
}

BIN
src/assets/iconfont/iconfont.ttf

Binary file not shown.

BIN
src/assets/iconfont/iconfont.woff

Binary file not shown.

BIN
src/assets/iconfont/iconfont.woff2

Binary file not shown.

2
src/types/auto-imports.d.ts

@ -2,6 +2,7 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const ElForm: typeof import('element-plus/es')['ElForm']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const ElNotification: typeof import('element-plus/es')['ElNotification']
@ -272,6 +273,7 @@ import { UnwrapRef } from 'vue'
declare module 'vue' {
interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>

10
src/views/details/index.scss

@ -79,6 +79,16 @@
margin-right: 6px;
}
}
.el-menu-item.weather {
.icon-weather {
font-size: 16px;
color: var(--el-menu-active-color);
}
span {
font-size: 16px;
color: var(--el-menu-active-color);
}
}
}
.paramList {

87
src/views/details/index.vue

@ -137,8 +137,14 @@
<div class="sidebar">
<h3>换热站</h3>
<el-menu :default-active="filterForm.deviceUuid" class="deviceMenu" @select="deviceSelect" @open="deviceOpen">
<el-menu-item :index="item.centerDeviceCode" v-for="item in deviceData" :key="item.centerDeviceCode">
<i class="iconfont icon-station" />
<el-menu-item
:class="{ weather: item.sign === 'weather' }"
:index="item.centerDeviceCode"
v-for="item in deviceData"
:key="item.centerDeviceCode"
>
<i class="iconfont icon-weather" v-if="item.sign === 'weather'" />
<i class="iconfont icon-station" v-else />
<el-tooltip class="box-item" effect="dark" :content="item.deviceName" placement="right-start">
{{ item.deviceName }}
</el-tooltip>
@ -153,6 +159,12 @@
<div class="item" v-for="(item, index) in mainInfoList" :key="index">
<div class="name"><i :style="`background-color:${colors[index]}`" />{{ item.name }}</div>
<div class="average">平均值 : {{ item.average }} {{ item.paramUnit }}</div>
<div class="average" v-if="filterForm.deviceUuid === 'weatherDataChart'">
最大温度 : {{ item.max }} {{ item.paramUnit }}
</div>
<div class="average" v-if="filterForm.deviceUuid === 'weatherDataChart'">
最小温度 : {{ item.min }} {{ item.paramUnit }}
</div>
</div>
</div>
</div>
@ -170,7 +182,15 @@ const stackedRef: Ref<HTMLElement | any> = ref(null);
import type { FormInstance, FormRules } from 'element-plus';
import { ReturnDownBack } from '@vicons/ionicons5';
import { getAllDevices, getDevices, getClass, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
import {
getAllDevices,
getDevices,
getClass,
getParams,
getPortions,
getDeviceInfos,
weatherHoursList
} from '@/api/device/index';
import { partitionVo, classVo, parameterVo, seriesVo, mainInfoVo } from '@/api/device/types';
const router = useRouter();
@ -252,6 +272,7 @@ const resetInit = {
export interface deviceVo {
centerDeviceCode: string;
deviceName: string;
sign: string;
}
const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
const deviceData = ref<deviceVo[]>();
@ -639,7 +660,11 @@ const deviceSelect = (key: string, keyPath: string[], item: object) => {
//
console.log(key, keyPath, item);
filterForm.deviceUuid = key;
verifyInfo();
if (key === 'weatherDataChart') {
getweatherHoursList();
} else {
verifyInfo();
}
};
const deviceOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath);
@ -709,7 +734,11 @@ function keyClick(res: string) {
function showZeroChange() {
//0
filterForm.showZero = !filterForm.showZero;
getDeviceInfo();
if (filterForm.deviceUuid === 'weatherDataChart') {
getweatherHoursList();
} else {
verifyInfo();
}
}
function getDevice() {
@ -758,6 +787,38 @@ function getDeviceInfo() {
});
}
function getweatherHoursList() {
//线
if (filterForm.deviceUuid === '') {
ElMessage({
message: '请选择换热站',
type: 'warning'
});
return;
}
if (filterForm.startTime === '') {
ElMessage({
message: '请选择起始时间',
type: 'warning'
});
return;
}
const params = filterForm;
params.startTime = searchForm.startTime;
params.step = searchForm.step;
params.stepType = searchForm.stepType;
params.queryType = 1;
weatherHoursList(params).then((res: any) => {
if (res.code === 200) {
mainInfoList.value = res.data.mainInfos;
if (res.data.additionalInfo != null) {
currentEndTime.value = res.data.additionalInfo.endTime;
}
init(res.data);
}
});
}
const debounceClick = debounce(() => {
getDeviceInfoss();
}, 360000);
@ -893,8 +954,12 @@ function dateChange(res: any) {
} else {
searchForm.startTime = res + ' ' + searchForm.time;
filterForm.startTime = res + ' ' + searchForm.time;
verifyInfo();
// console.log('date--', filterForm.startTime);
if (filterForm.deviceUuid === 'weatherDataChart') {
getweatherHoursList();
} else {
verifyInfo();
}
// console.log('date--', filterForm.deviceUuid);
}
}
function timeChange(res: any) {
@ -906,8 +971,12 @@ function timeChange(res: any) {
// console.log('time--', res, searchForm.time);
searchForm.startTime = searchForm.date + ' ' + res;
filterForm.startTime = searchForm.date + ' ' + res;
verifyInfo();
// console.log('time--', filterForm.startTime);
if (filterForm.deviceUuid === 'weatherDataChart') {
getweatherHoursList();
} else {
verifyInfo();
}
// console.log('time--', filterForm.deviceUuid);
}
}
function stepChange(num: any) {

50
src/views/monitoring/components/header.vue

@ -85,7 +85,7 @@
</div>
<div class="info">
<span>{{ item.paramName }}</span>
<n-button type="info" size="small" @click="waringConfirm(item)">确认</n-button>
<!-- <n-button type="info" size="small" @click="waringConfirm(item)">确认</n-button> -->
</div>
</div>
</div>
@ -143,7 +143,19 @@
</n-card>
</n-modal>
<div class="alarm">
<audio loop autoplay muted ref="alarmRef" ebkit-playsinline="true" playsinline="true" :src="audioUrl"></audio>
<audio loop autoplay ref="alarsRef" ebkit-playsinline="true" playsinline="true" controls="controls" muted hidden>
<source :src="audisUrl" type="audio/mp3" />
</audio>
<audio
loop
autoplay
ref="alarmRef"
ebkit-playsinline="true"
playsinline="true"
:src="audioUrl"
muted
hidden
></audio>
</div>
</template>
<script setup>
@ -161,6 +173,7 @@ import mitt from '@/plugins/bus';
import calendar from '@/utils/lunar';
import audioUrl from '@/assets/media/alarm.mp3';
const audisUrl = ref('');
const userStore = useUserStore();
const hoursNow = useNow().value.getHours();
const route = useRoute();
@ -185,6 +198,7 @@ const params = reactive({
});
const alarmRef = ref();
const alarsRef = ref();
const audioType = ref(false);
const weatherData = ref({ city: '', weather: '', temperature: '', weatherImg: '' });
@ -213,6 +227,11 @@ onMounted(() => {
deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
routerType.value = route.query?.id === undefined ? '0' : '1';
getWeatherData();
document.body.addEventListener('mousedown', function () {
console.log('鼠标按下');
alarsRef.value.play();
alarsRef.value.muted = false;
});
});
const timePeriod = computed(() => {
@ -238,16 +257,33 @@ mitt.on('waringMessage', res => {
res.data.map(item => {
// console.log(item.deviceName, item.alertSwitch);
if (item.alertSwitch === '1') {
// alarmRef.value.play();
// debugger;
// if (alarmRef.value) {
// //
// alarmRef.value.addEventListener('canplay', () => {
// audioType.value = true;
// alarmRef.value.play();
// // alarmRef.value.muted = false;
// });
// const playPromise = alarmRef.value.play();
// if (playPromise !== undefined) {
// playPromise.catch(error => {
// console.error(`Failed to play audio: ${error}`);
// });
// }
// }
canAutoPlay.audio().then(({ result }) => {
console.log('result--', result);
if (result === true) {
audioType.value = true;
alarmRef.value.play();
alarmRef.value.muted = false;
} else {
ElMessageBox.alert('检测到您的浏览器不支持媒体自动播放,是否同意播放测试音?', '提示', {
ElMessageBox.alert('检测到您的浏览器不支持媒体自动播放,是否同意播放提示音?', '提示', {
// if you want to disable its autofocus
// autofocus: false,
showclose: false,
showClose: false,
confirmButtonText: '同意',
callback: action => {
audioType.value = true;
@ -255,12 +291,6 @@ mitt.on('waringMessage', res => {
alarmRef.value.muted = false;
}
});
// this.$alert('', '', {
// confirmButtonText: '',
// callback: action => {
// alarmRef.value.play();
// }
// });
}
});
return;

4
src/views/monitoring/screen/components/main.vue

@ -210,8 +210,8 @@ const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
// const baseApi = "http://board.heatiot.cn:8001/prod-api"//websocket
//const baseApi = import.meta.env.VITE_APP_BASE_API
//const apiUrl = baseApi.replace(/https?:/, '');
const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket
// const wsUrl = `ws://172.1.2.39:9010/websocket/${userInfo.userName}`; //websocket
// const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket
const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket
const emit = defineEmits(['tableHeaderData']);
// const listData = ref([

4
vite.config.ts

@ -45,9 +45,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
hmr: true, //配置HMR
proxy: {
'/dev-api': {
// target: 'http://172.1.2.39:9010/', //本地接口地址
target: 'http://172.1.2.39:9010/', //本地接口地址
// target: 'http://172.1.2.90:9010/', //本地接口地址
target: 'http://10.10.10.56:9010/', //线上测试接口地址
// target: 'http://10.10.10.56:9010/', //线上测试接口地址
changeOrigin: true,
rewrite: path => path.replace(/^\/dev-api/, '')
}

Loading…
Cancel
Save