Web/bigscreenWeb
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

联调短信发送功能

Browse Source
This commit is contained in:
guanj
2026-06-22 18:57:53 +08:00
parent 5180dfaf60
commit 5c766684f9
13 changed files with 855 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@@ -35,6 +35,7 @@ declare module '@vue/runtime-core' {
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']

22
src/api/statistics/index.ts
View File

@@ -45,7 +45,8 @@ export function eventTrend(data: object) {
// 获取历史暂降事件趋势
export function noDealEventList(data: object) {
return service({
url: "/largescreen/noDealEventList",
// url: "/largescreen/noDealEventList",
url: "/largescreen/noDealEventListMessage",
method: "post",
data,
});
@@ -53,7 +54,8 @@ export function noDealEventList(data: object) {
// 处理暂降事件
export function lookEvent(data: object) {
return service({
url: "/largescreen/lookEvent",
// url: "/largescreen/lookEvent",
url: "/largescreen/lookMessage",
method: "post",
data,
});
@@ -210,6 +212,22 @@ export function eventPage(data: object) {
data,
});
}
// 获取短信模版
export function messageGenerate(data: object) {
return service({
url: "/accept/messageGenerate",
method: "post",
params: data,
});
}
// 发送短信
export function messageSend(data: object) {
return service({
url: "/accept/messageSend",
method: "post",
data,
});
}
// 导出暂降事件列表
export function eventPageExport(data: object) {
return service({

8
src/assets/scss/element.scss
View File

@@ -48,10 +48,7 @@
}
}
:deep(
.el-table--striped
.el-table__body
tr.el-table__row--striped
td.el-table__cell
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell
) {
background: #5aa1ff29 ;
}
@@ -99,3 +96,6 @@
}
// --el-text-color-regular: #fff;
}
:deep(.el-table__body tr.current-row > td.el-table__cell) {
background-color: #456a91de !important;
}

64
src/components/datePicker/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div style="width: 540px">
<div :style="{ width: showTime ? '640px' : '540px' }">
<el-select
v-model="interval"
style="min-width: 70px; width: 70px; margin-right: 10px"
@@ -17,16 +17,17 @@
<el-date-picker
v-model="timeValue"
size="small"
type="daterange"
:type="showTime ? 'datetimerange' : 'daterange'"
:disabled="disabledPicker"
:disabled-date="isFutureDate"
style="width: 190px; margin-right: 10px"
:style="{ width: showTime ? '305px' : '200px', marginRight: '10px' }"
unlink-panels
:clearable="false"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
:start-placeholder="showTime ? '开始时间' : '开始日期'"
:end-placeholder="showTime ? '结束时间' : '结束日期'"
:value-format="showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'"
:default-time="showTime ? defaultTimeRange : undefined"
:shortcuts="shortcuts"
/>
<el-button
@@ -59,14 +60,38 @@ interface Props {
nextFlag?: boolean;
theCurrentTime?: boolean;
setWatch?: boolean;
showTime?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
nextFlag: false,
theCurrentTime: true,
setWatch: true,
showTime: false,
});
const START_TIME_SUFFIX = " 00:00:00";
const END_TIME_SUFFIX = " 23:59:59";
const defaultTimeRange = [
new Date(2000, 0, 1, 0, 0, 0),
new Date(2000, 0, 1, 23, 59, 59),
];
const getDatePart = (val: string) => (val || "").substring(0, 10);
const formatRangeValue = (start: string, end: string): [string, string] => {
const startDate = getDatePart(start);
const endDate = getDatePart(end);
if (!props.showTime) {
return [startDate, endDate];
}
return [`${startDate}${START_TIME_SUFFIX}`, `${endDate}${END_TIME_SUFFIX}`];
};
const setRangeValue = (start: string, end: string) => {
timeValue.value = formatRangeValue(start, end);
};
const interval = ref(3);
const timeFlag = ref(1);
const count = ref(0);
@@ -124,13 +149,13 @@ const timeChange = (e: number) => {
if (e == 1) {
disabledPicker.value = true;
timeValue.value = [setTime(1), setTime()];
setRangeValue(setTime(1), setTime());
} else if (e == 2) {
disabledPicker.value = true;
timeValue.value = [setTime(2), setTime()];
setRangeValue(setTime(2), setTime());
} else if (e == 3) {
disabledPicker.value = true;
timeValue.value = [setTime(3), setTime()];
setRangeValue(setTime(3), setTime());
} else if (e == 4) {
let year = parseInt(setTime().substring(0, 4));
let month = parseInt(setTime().substring(5, 7));
@@ -140,12 +165,12 @@ const timeChange = (e: number) => {
var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay() - 1; // 如果为周日，则置为7天
disabledPicker.value = true;
timeValue.value = [setTime(0, dayOfWeek), setTime(0, -6 + dayOfWeek)];
setRangeValue(setTime(0, dayOfWeek), setTime(0, -6 + dayOfWeek));
} else if (e == 5) {
disabledPicker.value = false;
backDisabled.value = true;
preDisabled.value = props.nextFlag ? false : true;
timeValue.value = [setTime(), setTime()];
setRangeValue(setTime(), setTime());
}
if (e == 1 || e == 2) {
timeFlag.value = 0;
@@ -162,8 +187,8 @@ const nowTime = () => {
// 上一个
const preClick = () => {
preDisabled.value = false;
let startTime = timeValue.value[0];
let endTime = timeValue.value[1];
let startTime = getDatePart(timeValue.value[0]);
let endTime = getDatePart(timeValue.value[1]);
let year = parseInt(startTime.substring(0, 4));
let month = parseInt(startTime.substring(5, 7));
let date = parseInt(startTime.substring(8, 10));
@@ -215,7 +240,7 @@ const preClick = () => {
startTime = year + "-01-01";
endTime = year + "-12-31";
}
timeValue.value = [startTime, endTime];
setRangeValue(startTime, endTime);
// 判断向后键的状态
// var temp = NowgetEndTime()
@@ -224,8 +249,8 @@ const preClick = () => {
//下一个
const next = () => {
//向后
let startTime = timeValue.value[0];
let endTime = timeValue.value[1];
let startTime = getDatePart(timeValue.value[0]);
let endTime = getDatePart(timeValue.value[1]);
let year = parseInt(startTime.substring(0, 4));
let month = parseInt(startTime.substring(5, 7));
let date = parseInt(startTime.substring(8, 10));
@@ -444,7 +469,7 @@ const next = () => {
}
if (!props.nextFlag) {
if (
new Date(endTime + " 00:00:00").getTime() >=
new Date(getDatePart(endTime) + " 00:00:00").getTime() >=
new Date(
(window as any).XEUtils.toDateString(new Date(), "yyyy-MM-dd ") +
" 00:00:00"
@@ -454,7 +479,7 @@ const next = () => {
}
}
timeValue.value = [startTime, endTime];
setRangeValue(startTime, endTime);
};
const setTime = (flag = 0, e = 0) => {
@@ -590,6 +615,9 @@ defineExpose({
getYearOnYear,
getMonthOnMonth,
timeChange,
setRangeValue,
formatRangeValue,
getDatePart,
});
</script>

2
src/utils/request.ts
View File

@@ -143,7 +143,7 @@ service.interceptors.response.use(
});
}
} else {
return Promise.reject(res.data);
return Promise.reject(res.data||res.data.message);
}
},
(error) => {

6
src/utils/webSocketClient.ts
View File

@@ -58,7 +58,7 @@ export default class SocketService {
setTimeout(() => {
//"ws://10.156.193.182:18093/ws/screen" 北京
//"ws://192.168.1.130:19001/ws/askRealTimeData/" 无锡
const url = (mqttUrl || "ws://192.168.1.127:19001/ws/") + id;
const url = (mqttUrl || "ws://192.168.2.130:18093/ws/") + id;
// const url = (mqttUrl || "ws://192.168.1.63:18093/ws/screen") + id;
console.log("🚀 ~ SocketService ~ connect ~ url:", url);
this.ws = new WebSocket(url);
@@ -126,7 +126,7 @@ export default class SocketService {
const url = window.URL.createObjectURL(
new Blob([
"(function(e){setInterval(function(){this.postMessage(null)},30000)})()",
])
]),
);
this.workerBlobUrl = url;
this.work = new Worker(url);
@@ -175,7 +175,7 @@ export default class SocketService {
// 回调函数的注册
public registerCallBack(
socketType: string,
callBack: (message: MessageType) => void
callBack: (message: MessageType) => void,
): void {
this.callBackMapping[socketType] = callBack;
}

193
src/views/VoltageSag_BJ/components/alarm.vue
View File

@@ -6,7 +6,7 @@
<div class="totalBox" style="background-color: #28a74570">
<div class="textTop" @click="openalarmPopUpBox(0, data.importId)">
<span>{{ data.importNum || 0 }}</span>
<span style="font-size: 13px">半导体及精密加工企业<br />监测总数</span>
<span style="font-size: 13px">半导体企业<br />监测总数</span>
</div>
<div
class="textTop"
@@ -27,7 +27,7 @@
<div class="textTop" @click="openalarmPopUpBox(1, data.importId)">
<span>{{ data.importDevNum || 0 }}</span>
<span style="font-size: 13px"
>半导体及精密加工企业<br />受影响户数</span
>半导体企业<br />影响用户数</span
>
</div>
<div
@@ -35,11 +35,11 @@
@click="openalarmPopUpBox(1, data.otherImportId)"
>
<span>{{ data.otherImportDevNum || 0 }}</span>
<span style="font-size: 13px">其他敏感用户<br />受影响户数</span>
<span style="font-size: 13px">其他敏感用户<br />影响用户数</span>
</div>
<div class="textTop" @click="openalarmPopUpBox(1, data.otherId)">
<span>{{ data.otherDevNum || 0 }}</span>
<span style="font-size: 13px">非敏感用户<br />受影响户数</span>
<span style="font-size: 13px">非敏感用户<br />影响用户数</span>
</div>
</div>
</div>
@@ -89,9 +89,51 @@ const sensitivePopUpBoxRef = ref();
const alarmPopUpBoxRefEvent = ref();
function truncateLabel(name: string, maxLen: number) {
if (name.length <= maxLen) return name;
return name.substring(0, maxLen - 1) + "…";
}
function formatLeafLabel(name: string, count: number, maxLen: number) {
if (!count) return "";
return `${truncateLabel(name, maxLen)}(${count})`;
}
const INNER_MIN_RATIO = 0.2;
const OUTER_MIN_RATIO = 0.03;
function getGroupTotal(item: any) {
return item.children.reduce(
(sum: number, c: any) => sum + (c.count || 0),
0
);
}
function getGroupDisplayScales(innerList: any[]) {
const totals = innerList.map(getGroupTotal);
const sum = totals.reduce((a, b) => a + b, 0) || 1;
const minVal = sum * INNER_MIN_RATIO;
const displayTotals = totals.map((t) => Math.max(t, minVal));
return totals.map((t, i) => (t > 0 ? displayTotals[i] / t : 1));
}
function getOuterDisplayValues(children: any[], groupScale: number) {
const scaledValues = children.map((c) => (c.count || 0) * groupScale);
const groupSum = scaledValues.reduce((a, b) => a + b, 0) || 1;
const minVal = groupSum * OUTER_MIN_RATIO;
return scaledValues.map((v) => (v > 0 ? Math.max(v, minVal) : 0.001));
}
const renderChart = (key: any) => {
var myChart = proxy.$echarts.init(key);
const color = ["#2E8B57", "#0a73ff", "#DAA520"];
const chartColors = ["#2E8B57", "#0a73ff", "#DAA520"];
const maxChildren = Math.max(
...data.value.innerList.map((item: any) => item.children?.length || 0),
0
);
const outerFontSize = maxChildren > 8 ? 9 : maxChildren > 5 ? 10 : 11;
const outerLabelMaxLen = maxChildren > 8 ? 5 : maxChildren > 5 ? 6 : 8;
const groupScales = getGroupDisplayScales(data.value.innerList || []);
myChart.setOption({
title: {
text: "电压暂降用户分类统计(单位：次)",
@@ -104,136 +146,85 @@ const renderChart = (key: any) => {
},
tooltip: {
formatter: (params) => {
let str = params.marker + params.name;
return str;
formatter: (params: any) => {
const label =
params.data?.fullLabel ??
(params.data?.count != null
? `${params.name?.replace(/\n/g, "")}(${params.data.count})`
: params.name?.replace(/\n/g, ""));
if (!label) return "";
return params.marker + label;
},
},
// {
// name: "半导体及\n精密加工",
// itemStyle: {
// color: "#2E8B57",
// },
// label: {
// rotate: "radial",
// color: "#ffffff",
// fontSize: 10,
// },
// children: [
// {
// name: "半导体（8次）",
// value: 10,
// itemStyle: {
// color: "#2E8B57",
// },
// label: {
// position: "outside",
// fontSize: 10,
// color: "#ffffff",
// },
// labelLine: {
// show: true,
// length1: 10,
// smooth: true,
// length2: 10,
// },
// },
// {
// name: "半导体（12次）",
// value: 10,
// itemStyle: {
// color: "#2E8B57",
// },
// label: {
// position: "outside",
// fontSize: 10,
// color: "#ffffff",
// },
// labelLine: {
// show: true,
// length1: 10,
// smooth: true,
// length2: 10,
// },
// },
// ],
// },
series: [
{
type: "sunburst",
nodeClick: false,
data: data.value.innerList.map((item, i) => {
labelLayout: (params: any) => ({
hideOverlap: !!params.labelLinePoints?.length,
}),
data: data.value.innerList.map((item: any, i: number) => {
return {
name: insertNewLine(item.name),
itemStyle: {
color: color[i],
color: chartColors[i],
},
parentId: item.children[0].parentId,
parentId: item.children[0]?.parentId,
label: {
rotate: "radial",
color: "#ffffff",
fontSize: 11,
fontSize: 10,
lineHeight: 12,
},
children: item.children.map((k) => {
children: (() => {
const outerDisplayValues = getOuterDisplayValues(
item.children,
groupScales[i]
);
return item.children.map((k: any, j: number) => {
const count = k.count ?? 0;
const fullLabel = `${k.name}(${count})`;
return {
name: k.name + `(${k.count})`,
value: k.count,
name: formatLeafLabel(k.name, count, outerLabelMaxLen),
fullLabel,
count,
value: outerDisplayValues[j],
parentId: k.parentId,
treeId: k.treeId,
itemStyle: {
color: color[i],
color: chartColors[i],
},
// label: {
// position: "outside",
// fontSize: 10,
// distance: 20, // 调整标签与图形的距离
// color: "#ffffff",
// avoidLabelOverlap: true,
// },
// labelLine: {
// show: true,
// length: 10,
// length2: 30,
// },
label: {
show: count > 0,
position: "outside",
distance: 20, // 增加距离避免重叠
fontSize: 12,
rotate: 0,
distance: 20,
fontSize: outerFontSize,
color: "#ffffff",
avoidLabelOverlap: true, // 启用避让
avoidLabelOverlap: true,
minMargin: 4,
formatter: (params: any) => {
if (!params.data?.fullLabel) return "";
return params.name;
},
},
labelLine: {
show: true,
show: count > 0,
smooth: true,
minTurnAngle: 60,
length: 10,
length2: 10,
},
};
}),
});
})(),
};
}),
radius: [0, "60%"],
center: ["50%", "55%"],
itemStyle: {
borderWidth: 2,
normal: {
label: {
rotate: 0,
fontSize: 13,
lineHeight: 20,
rich: {
fontSize16: {
fontSize: "16px",
},
fontSize12: {
fontSize: "12px",
},
},
},
},
},
levels: [
{},
@@ -253,7 +244,10 @@ const renderChart = (key: any) => {
r0: "40%",
r: "60%",
label: {
rotate: 0,
align: "right",
avoidLabelOverlap: true,
minMargin: 4,
},
},
],
@@ -262,7 +256,6 @@ const renderChart = (key: any) => {
],
});
myChart.on("click", function (params: any) {
console.log("🚀 ~ renderChart ~ params:", params);
alarmPopUpBoxRefEvent.value.open(
params.data.parentId,
params.data.treeId || ""
@@ -447,7 +440,7 @@ const init = async () => {
// customId: null,
// name: "精密加工",
// code: null,
// count: 335,
// count: 1,
// eventList: null,
// children: null,
// },
@@ -457,7 +450,7 @@ const init = async () => {
// customId: null,
// name: "半导体制造",
// code: null,
// count: 113,
// count: 2,
// eventList: null,
// children: null,
// },

28
src/views/VoltageSag_BJ/components/bottomText.vue
View File

@@ -37,7 +37,8 @@
<span class="iconfont icon-gaojing" :class="item.checked ? 'blue' : 'animate-flash-red'"></span>
<div :style="{ color: item.checked ? '#0a73ff' : '#ff0000' }" style="font-weight: 650"
@click="handleCurrentChange(item)">
<div>{{ item.timeid }}.{{ item.ms }}</div>
{{ item.messageContent }}
<!-- <div>{{ item.timeid }}.{{ item.ms }}</div>
<p class="mt5">
{{ item.bdname }} {{ item.pointname }}发生{{
filteWavetype(item.wavetype)
@@ -50,7 +51,7 @@
影响范围： </span><span style="flex: 1" :style="{ color: item.checked ? '#0a73ff' : '#ffc107' }">{{
item.objName
}}</span>
</p>
</p> -->
</div>
</div>
</div>
@@ -82,6 +83,7 @@ const gradeValue: any = ref(0);
const handleSelectionChange = (val: any) => {
multipleSelection.value = val;
};
const mp3Src: any = new URL(`@/assets/mp3/9578.mp3`, import.meta.url);
const audioRef: any = ref(null);
const updateData = (row: any) => {
@@ -132,11 +134,12 @@ const speakBrowser = (item: any) => {
audioRef.value.play(); //没有就播放
// audioRef.value.pause() //暂停
} else if (store.state.voiceType == 1) {
speak(
`　　　　　　${item.timeid}${item.bdname}${item.pointname
}发生${filteWavetype(item.wavetype)}事件,事件特征幅值${Math.floor(
item.eventvalue * 100
)}%,持续时间：${item.persisttime}秒`,
speak(`${item.messageContent}`
// `　　　　　　${item.timeid}${item.bdname}${item.pointname
// }发生${filteWavetype(item.wavetype)}事件,事件特征幅值${Math.floor(
// item.eventvalue * 100
// )}%,持续时间：${item.persisttime}秒`
,
() => {
// key.value += 1;
}
@@ -156,10 +159,10 @@ const totalProcessing = (number: number, id?: string) => {
//紧急告警确认
list = urgentList.value
.filter((item: any) => item.checked == true)
.map((item: any) => item.eventdetail_index);
.map((item: any) => item.messageIds);
} else if (number == 2) {
//紧急告警全部确认
list = urgentList.value.map((item: any) => item.eventdetail_index);
list = urgentList.value.map((item: any) => item.messageIds);
} else if (number == 3) {
list = [id];
}
@@ -173,13 +176,14 @@ const totalProcessing = (number: number, id?: string) => {
type: "warning",
})
.then(() => {
lookEvent(list).then((res) => {
lookEvent( [...new Set(list.flat())]).then((res) => {
list.forEach((id: any) => {
urgentList.value = urgentList.value.filter(
(item: any) => item.eventdetail_index != id
(item: any) => item.messageIds != id
);
broadcast.value = broadcast.value.filter(
(item: any) => item.eventdetail_index != id
(item: any) => item.messageIds != id
);
});
if (broadcast.value.length == 0) {

477
src/views/VoltageSag_BJ/components/send.vue Normal file
View File

@@ -0,0 +1,477 @@
<template>
<el-dialog :close-on-click-modal="false" draggable v-model="machineVisible" :title="title" width="1200px"
:before-close="handleClose">
<el-form inline="true" class="formLeft">
<el-form-item>
<datePicker :setWatch="false" :showTime="true" ref="datePickerRef" style="width: 560px" />
</el-form-item>
<el-form-item label="关键字筛选" style="margin-right: 10px">
<el-input clearable v-model="searchValue" size="small" placeholder="电站、测点、用户信息"></el-input>
</el-form-item>
<el-form-item style="margin-right: auto">
<el-popover placement="bottom" :width="550" trigger="click">
<template #reference>
<el-button size="small" :icon="DArrowRight" type="primary">更多</el-button>
</template>
<el-form label-width="auto">
<el-form-item label="关键字筛选">
<el-input clearable style="width: 150px" v-model="searchValue" size="small"
placeholder="电站、测点、用户信息"></el-input>
</el-form-item>
<el-form-item label="运维单位">
<el-select v-model="deptsIndex" placeholder="请选择运维单位" clearable size="small"
:teleported="false" style="width: 150px">
<el-option v-for="item in deptsList" :label="item.deptsname" :value="item.deptsIndex"
:key="item.deptsIndex"></el-option>
</el-select>
</el-form-item>
<el-form-item label="触发类型">
<el-select clearable size="small" :teleported="false" v-model="eventForm.eventtype"
placeholder="请选择触发类型" style="width: 150px">
<el-option v-for="item in eventTypeList" :label="item.label" :value="item.value"
:key="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="残余电压百分比">
<el-input-number v-model="eventForm.eventValueMin" :min="0" style="width: 150px"
size="small" :max="100" :precision="1" :step="1"
@change="(e) => (e == null ? (eventForm.eventValueMin = 1) : null)"><template #suffix>
<span>%</span>
</template></el-input-number>
<span>　< 残余电压 <　</span>
<el-input-number v-model="eventForm.eventValueMax" :min="0" style="width: 150px"
size="small" :max="100" :precision="1" :step="1"
@change="(e) => (e == null ? (eventForm.eventValueMax = 1) : null)"><template
#suffix>
<span>%</span>
</template></el-input-number>
</el-form-item>
<el-form-item label="暂降持续事时间">
<el-input-number v-model="eventForm.eventDurationMin" :min="0" style="width: 150px"
size="small" :max="1000000" :precision="1" :step="1" @change="
(e) => (e == null ? (eventForm.eventDurationMin = 1) : null)
"><template #suffix>
<span>ms</span>
</template></el-input-number>
<span>　< 持续时间 <　</span>
<el-input-number v-model="eventForm.eventDurationMax" :min="0" style="width: 150px"
size="small" :max="1000000" :precision="1" :step="1" @change="
(e) => (e == null ? (eventForm.eventDurationMax = 1) : null)
"><template #suffix>
<span>ms</span>
</template></el-input-number>
</el-form-item>
</el-form>
</el-popover>
</el-form-item>
<el-form-item style="margin-right: 0;">
<el-button size="small" :icon="Search" type="primary" @click="inquire(true)">查询</el-button>
<el-button size="small" type="warn" :icon="RefreshLeft" @click="clearInit()">重置</el-button>
<el-button type="primary" :icon="Download" @click="exportTable" size="small" :loading="exportLoading">导出
</el-button>
</el-form-item>
</el-form>
<div class="tableBox" v-loading="loading" element-loading-background="#343849c7">
<el-table :scrollbar-always-on="true" :data="tableData" height="300px" size="small" stripe
highlight-current-row :header-cell-style="{ textAlign: 'center' }" border @row-click="handleRowClick">
<el-table-column align="center" width="50">
<template #default="scope">
<el-radio v-model="selectedRowId" :label="scope.row.eventdetail_index"
@change="handleRowSelect(scope.row)" @click.stop>&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column label="序号" align="center" width="60">
<template #default="scope">
{{ (pageNum - 1) * pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="timeid" align="center" label="发生时间" width="160" sortable>
<template #default="scope">
{{ scope.row.timeid }}.{{ scope.row.ms }}
</template>
</el-table-column>
<el-table-column prop="bdname" align="center" label="变电站" show-overflow-tooltip sortable />
<el-table-column prop="busName" align="center" label="母线" show-overflow-tooltip />
<el-table-column prop="pointname" align="center" label="监测点" show-overflow-tooltip />
<el-table-column prop="objName" align="center" label="用户" show-overflow-tooltip>
<template #default="scope">{{ scope.row.objName || "/" }}</template>
</el-table-column>
<el-table-column prop="wavetype" align="center" width="70" label="触发类型">
<template #default="scope">
{{ filteWavetype(scope.row.wavetype) }}
</template>
</el-table-column>
<el-table-column prop="eventvalue" align="center" label="残余电压" width="90" sortable>
<template #default="scope">
{{ Math.floor(scope.row.eventvalue * 10000) / 100 }}%
</template>
</el-table-column>
<el-table-column prop="persisttime" align="center" label="持续时间" width="90" sortable>
<template #default="scope">
{{ Math.floor(scope.row.persisttime * 1000) / 1000 }}s
</template>
</el-table-column>
<el-table-column prop="address" align="center" label="操作" width="80">
<template #default="scope">
<el-button size="small" type="primary" link @click.stop="trendCharts(scope.row)">
波形
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination style="margin-top: 10px" :currentPage="pageNum" :page-size="pageSize"
:page-sizes="[10, 20, 50, 100, 200]" background size="small"
:layout="'sizes,total, ->, prev, pager, next, jumper'" :total="total" @size-change="onTableSizeChange"
@current-change="onTableCurrentChange"></el-pagination>
</div>
<el-divider />
<div class="sendBox" style="min-height: 37px;">
<div>发送用户：</div>
<div style="flex: 1;">
<el-tag v-for="(item, index) in messageList.pqsUsers" :key="index" class="mr5 mb10">
{{ item.name }}
</el-tag>
</div>
</div>
<div class="sendBox">
<div>短信模板： </div>
<el-input v-model="messageList.message" style="flex: 1;" :rows="2" type="textarea"
:value="messageList && messageList.message" />
</div>
<div class="sendBox mt10" style="justify-content: flex-end;">
<el-button size="small" :icon="Message" type="primary" @click="sendMessage"
:loading="sendLoading">发送</el-button>
</div>
</el-dialog>
<el-dialog :close-on-click-modal="false" draggable v-model="trendVisible" v-if="trendVisible" title="波形"
width="70%">
<waveForm ref="waveFormRef" />
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, computed } from "vue";
import { eventPage, regionDevCount, messageGenerate, messageSend } from "@/api/statistics/index";
import {
DArrowRight,
Search,
RefreshLeft,
Download, Message
} from "@element-plus/icons-vue";
import * as XLSX from "xlsx";
import waveForm from "@/components/BX/waveForm.vue";
import datePicker from "@/components/datePicker/index.vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
const store = useStore();
const machineVisible = ref(false);
const title = ref("暂降事件列表");
const datePickerRef = ref();
const pageNum = ref(1);
const pageSize = ref(20);
const loading = ref(false);
const exportLoading = ref(false);
const total = ref(0);
const tableData = ref([]);
const searchValue = ref("");
const deptsIndex = ref(null);
const deptsList = ref([]);
const trendVisible = ref(false);
const waveFormRef = ref();
const selectedRowId = ref("");
const pqsUsers = ref([]);
const selectedRow = ref<any>(null);
const textarea = ref("");
const messageList = ref({
message: "",
eventId: "",
pqsUsers: []
});
const eventForm: any = reactive({
eventValueMin: null,
eventValueMax: null,
eventDurationMin: null,
eventDurationMax: null,
eventtype: null,
});
const sendLoading = ref(false);
const typeMap: Record<string, string> = {
"0": "扰动",
"1": "暂降",
"2": "暂升",
"3": "中断",
"4": "其他",
"5": "录波",
};
const eventTypeList = computed(() => {
const availableTypes = store.state.eventTypeList.map((type: number) =>
String(type)
);
return availableTypes
.filter((type) => Object.prototype.hasOwnProperty.call(typeMap, type))
.map((type) => ({
value: type,
label: typeMap[type],
}));
});
const getTimeRange = () => {
const picker = datePickerRef.value;
if (picker?.timeValue?.length === 2) {
return {
type: picker.interval ?? store.state.timeType,
startDateTime: picker.timeValue[0],
endTDateime: picker.timeValue[1],
};
}
return {
type: store.state.timeType,
startDateTime: store.state.timeValue[0],
endTDateime: store.state.timeValue[1],
};
};
const getQueryParams = (override: Record<string, any> = {}) => {
const { type, startDateTime, endTDateime } = getTimeRange();
return {
deptId: deptsIndex.value || store.state.deptId,
type,
startDateTime,
endTDateime,
eventtype: null,
pageNum: pageNum.value,
pageSize: pageSize.value,
searchValue: searchValue.value,
...eventForm,
eventValueMin:
eventForm.eventValueMin == null ? null : eventForm.eventValueMin / 100,
eventValueMax:
eventForm.eventValueMax == null ? null : eventForm.eventValueMax / 100,
...override,
};
};
const filteWavetype = (wavetype: string) => {
return typeMap[String(wavetype)] ?? "";
};
const clearSelection = () => {
selectedRowId.value = "";
selectedRow.value = null;
};
const handleRowClick = (row: any) => {
selectedRowId.value = row.eventdetail_index;
selectedRow.value = row;
getMessage(row.eventdetail_index);
};
const handleRowSelect = (row: any) => {
selectedRow.value = row;
getMessage(row.eventdetail_index);
};
const getMessage = (eventId: string) => {
messageGenerate({ eventId: eventId }).then((res: any) => {
if (res.code == 'A0000') {
messageList.value = res.data;
} else {
ElMessage.warning(res.message);
messageList.value = {
message: "",
eventId: "",
pqsUsers: [
]
}
}
})
};
const initDept = () => {
const { type, startDateTime, endTDateime } = getTimeRange();
regionDevCount({
deptId: store.state.deptId,
type,
startDateTime,
endTDateime,
}).then((res: any) => {
deptsList.value = res.data;
});
};
const syncDatePicker = () => {
if (!datePickerRef.value) return;
datePickerRef.value.interval = store.state.timeType;
datePickerRef.value.setRangeValue(
store.state.timeValue[0],
store.state.timeValue[1]
);
};
const inquire = (resetPage = false) => {
messageList.value = {
message: "",
eventId: "",
pqsUsers: [
]
}
if (resetPage) {
pageNum.value = 1;
pageSize.value = 20;
clearSelection();
}
loading.value = true;
eventPage(getQueryParams()).then((res) => {
total.value = res.data.total;
tableData.value = res.data.records;
loading.value = false;
});
};
const clearInit = async () => {
searchValue.value = "";
eventForm.eventValueMin = null;
eventForm.eventValueMax = null;
eventForm.eventDurationMin = null;
eventForm.eventDurationMax = null;
eventForm.eventtype = null;
deptsIndex.value = null;
await inquire(true);
};
const trendCharts = (row: any) => {
trendVisible.value = true;
setTimeout(() => {
waveFormRef.value?.open(row);
}, 500);
};
const open = (text: string) => {
title.value = text || "暂降事件列表";
clearSelection();
machineVisible.value = true;
nextTick(() => {
syncDatePicker();
initDept();
inquire(true);
});
};
const sendMessage = () => {
const pqsUsers = messageList.value.pqsUsers;
if (pqsUsers.length == 0) {
ElMessage.warning("发送用户不能为空,请选择有用户的暂降事件!");
return;
}
if (!messageList.value.message?.trim()) {
ElMessage.warning("请输入发送短信内容!");
return;
}
sendLoading.value = true;
messageSend({
...messageList.value,
})
.then((res: any) => {
if (res.code == 'A0000') {
if (res.data.sendResult == 0) {
ElMessage.warning("发送失败");
} else {
ElMessage.success("发送成功");
}
} else {
ElMessage.warning(res.message);
}
}).catch((error: any) => {
ElMessage.warning("发送失败");
})
.finally(() => {
sendLoading.value = false;
});
};
const onTableSizeChange = (size: number) => {
pageSize.value = size;
inquire();
};
const onTableCurrentChange = (page: number) => {
pageNum.value = page;
inquire();
};
const exportTable = async () => {
exportLoading.value = true;
const columnExpor: any = [
["发生时间", "变电站", "母线", "监测点", "用户", "触发类型", "残余电压", "持续时间"],
];
try {
const res = await eventPage(
getQueryParams({ pageNum: 1, pageSize: total.value })
);
const data = res.data.records.map((item: any) => [
`${item.timeid}.${item.ms}`,
item.bdname,
item.busName,
item.pointname,
item.objName || "/",
filteWavetype(item.wavetype),
`${Math.floor(item.eventvalue * 10000) / 100}%`,
`${Math.floor(item.persisttime * 1000) / 1000}s`,
]);
const list = [...columnExpor, ...data];
const worksheet = XLSX.utils.aoa_to_sheet(list);
worksheet["!cols"] = list[0].map(() => ({ wch: 20 }));
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "暂降事件列表");
XLSX.writeFile(workbook, "暂降事件列表.xlsx");
} finally {
exportLoading.value = false;
}
};
const handleClose = () => {
machineVisible.value = false;
};
defineExpose({ open, selectedRow, selectedRowId });
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";
.formLeft {
display: flex;
align-items: center;
color: #fff;
}
.tableBox {
padding: 0;
}
:deep(.el-radio__label) {
display: none;
}
.sendBox {
display: flex;
justify-content: space-between;
}
</style>

1
src/views/VoltageSag_BJ/components/sendTrends.vue
View File

@@ -15,7 +15,6 @@
<script lang="ts" setup>
import { onMounted, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { color, deptId } from "@/constant/index";
import { rightImportUser } from "@/api/statistics/index";
import { useStore } from "vuex";

113
src/views/VoltageSag_BJ/components/smsQueries.vue
View File

@@ -1,121 +1,49 @@
<template>
<!--短信查询-->
<el-dialog
:close-on-click-modal="false"
draggable
v-model="machineVisible"
:title="title"
width="1200px"
:before-close="handleClose"
>
<el-dialog :close-on-click-modal="false" draggable v-model="machineVisible" :title="title" width="1200px"
:before-close="handleClose">
<div class="formBox">
<div class="formLeft">
<datePicker
:setWatch="false"
ref="datePickerRef"
style="width: 470px"
/>
<datePicker :setWatch="false" ref="datePickerRef" style="width: 470px" />
<span>关键字搜索： </span>
<el-input
size="small"
v-model="searchValue"
placeholder="请输入关键字"
clearable
style="width: 130px"
></el-input>
<el-input size="small" v-model="searchValue" placeholder="请输入关键字" clearable style="width: 130px"></el-input>
<span class="ml20">发送结果： </span>
<el-select
size="small"
v-model="state"
placeholder="请选择"
style="width: 100px"
clearable
>
<el-select size="small" v-model="state" placeholder="请选择" style="width: 100px" clearable>
<el-option label="成功" value="1" />
<el-option label="失败" value="0" />
</el-select>
</div>
<div>
<el-button type="primary" :icon="Search" size="small" @click="inquire"
>查询</el-button
>
<el-button
type="primary"
:icon="Download"
@click="exportTable"
size="small"
>导出
<el-button type="primary" :icon="Search" size="small" @click="inquire">查询</el-button>
<el-button type="primary" :icon="Download" @click="exportTable" size="small">导出
</el-button>
<!-- <el-button type="primary" :icon="Delete" size="small">删除</el-button> -->
</div>
</div>
<div class="tableBox">
<el-table
:scrollbar-always-on="true"
:data="tableData"
height="500px"
size="small"
stripe
v-loading="loading"
element-loading-background="#343849c7"
:header-cell-style="{ textAlign: 'center' }"
border
>
<el-table :scrollbar-always-on="true" :data="tableData" height="500px" size="small" stripe v-loading="loading"
element-loading-background="#343849c7" :header-cell-style="{ textAlign: 'center' }" border>
<!-- <el-table-column type="selection" align="center" width="45" /> -->
<el-table-column label="序号" align="center" type="index" width="70" />
<el-table-column
prop="sendTime"
align="center"
label="时间"
width="170"
/>
<el-table-column
prop="userName"
align="center"
label="接收人"
width="100"
/>
<el-table-column
prop="phone"
align="center"
label="手机号"
width="100"
/>
<el-table-column
prop="sendResult"
align="center"
label="发送结果"
width="100"
>
<el-table-column prop="sendTime" align="center" label="时间" width="170" />
<el-table-column prop="userName" align="center" label="接收人" width="100" />
<el-table-column prop="phone" align="center" label="手机号" width="100" />
<el-table-column prop="sendResult" align="center" label="发送结果" width="100">
<template #default="scope">
<el-tag
v-if="scope.row.sendResult === 1"
size="small"
type="success"
effect="dark"
>成功
<el-tag v-if="scope.row.sendResult === 1" size="small" type="success" effect="dark">成功
</el-tag>
<el-tag v-else size="small" type="danger" effect="dark"
>失败
<el-tag v-else size="small" type="danger" effect="dark">失败
</el-tag>
</template>
</el-table-column>
<el-table-column prop="msgContent" label="发送内容" />
</el-table>
</div>
<el-pagination
style="margin-top: 10px"
:currentPage="form.pageNum"
:page-size="form.pageSize"
:page-sizes="[10, 20, 50, 100, 200]"
background
size="small"
:layout="'sizes,total, ->, prev, pager, next, jumper'"
:total="total"
@size-change="onTableSizeChange"
@current-change="onTableCurrentChange"
></el-pagination>
<el-pagination style="margin-top: 10px" :currentPage="form.pageNum" :page-size="form.pageSize"
:page-sizes="[10, 20, 50, 100, 200]" background size="small"
:layout="'sizes,total, ->, prev, pager, next, jumper'" :total="total" @size-change="onTableSizeChange"
@current-change="onTableCurrentChange"></el-pagination>
</el-dialog>
</template>
<script lang="ts" setup>
@@ -226,14 +154,17 @@ defineExpose({ open });
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";
.tableBox {
padding: 0px !important;
}
.formBox {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.formLeft {
display: flex;
align-items: center;

78
src/views/VoltageSag_BJ/index.vue
View File

@@ -1,17 +1,13 @@
<template>
<div id="index" ref="appRef">
<div
class="bg"
:class="
store.state.screenNotic == 1
<div class="bg" :class="store.state.screenNotic == 1
? pushFlag
? bottomTextRef?.urgentList.length > 0
? 'bg-red'
: ''
: ''
: ''
"
>
">
<dv-loading v-if="loading">Loading...</dv-loading>
<div v-else class="host-body">
@@ -19,8 +15,7 @@
<div class="react-left">
<span class="text fw-b">
{{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
{{ timeInfo.dateDay }}</span
>
{{ timeInfo.dateDay }}</span>
</div>
<dv-decoration-10 class="dv-dec-10" :color="color[1]" />
@@ -29,11 +24,7 @@
<div class="title">
<span class="title-text">{{ title }}</span>
</div>
<dv-decoration-8
class="dv-dec-8"
:reverse="true"
:color="color[2]"
/>
<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="color[2]" />
</div>
<dv-decoration-10 class="dv-dec-10-s" :color="color[1]" />
</div>
@@ -41,10 +32,7 @@
<div class="d-flex secondLine">
<div class="react-right mr-1">
<span class="text fw-b" style="display: flex">
<datePicker
ref="datePickerRef"
@timeChangeInfo="timeChangeInfo"
/>
<datePicker ref="datePickerRef" @timeChangeInfo="timeChangeInfo" />
</span>
</div>
@@ -68,7 +56,10 @@
台账导出
</el-dropdown-item>
<el-dropdown-item @click="handleClick('1')">
短信管理
短信查询
</el-dropdown-item>
<el-dropdown-item @click="handleClick('7')">
短信发送
</el-dropdown-item>
<el-dropdown-item @click="handleClick('6')">
缓存刷新
@@ -95,36 +86,22 @@
<alarm ref="alarmRef" />
<!-- 紧急告警 -->
<div
class="icon"
v-if="!(bottomTextRef?.urgentList.length == 0)"
:color="color[0][1]"
:class="
bottomTextRef?.urgentList.length > 0
<div class="icon" v-if="!(bottomTextRef?.urgentList.length == 0)" :color="color[0][1]" :class="bottomTextRef?.urgentList.length > 0
? 'animate-flash-red'
: ''
"
@click="drawerClick"
>
" @click="drawerClick">
<!-- <WarnTriangleFilled /> -->
<span
class="iconfont icon-gaojing"
:style="{
<span class="iconfont icon-gaojing" :style="{
color:
bottomTextRef?.urgentList.length > 0
? '#ff0000'
: color[0][1],
}"
></span>
<span
class="count"
v-if="bottomTextRef?.urgentList.length > 0"
>{{
}"></span>
<span class="count" v-if="bottomTextRef?.urgentList.length > 0">{{
bottomTextRef?.urgentList.length > 99
? "99+"
: bottomTextRef?.urgentList.length
}}</span
>
}}</span>
</div>
</dv-border-box-13>
</div>
@@ -137,10 +114,7 @@
<!-- <bottom-left /> -->
</dv-border-box-13>
<dv-border-box-13 :color="color[0]">
<informationTable
ref="informationTableRef"
@handleCurrentChange="handleCurrentChange"
/>
<informationTable ref="informationTableRef" @handleCurrentChange="handleCurrentChange" />
</dv-border-box-13>
<dv-border-box-13 :color="color[0]">
<sendTrends ref="sendTrendsRef" />
@@ -150,21 +124,16 @@
</div>
</div>
</div>
<bottomText
ref="bottomTextRef"
@handleCurrentChange="handleCurrentChange"
/>
<bottomText ref="bottomTextRef" @handleCurrentChange="handleCurrentChange" />
<!-- 已发短信查询 -->
<smsQueries
ref="smsQueriesRef"
v-if="smsQueriesFlag"
@close="smsQueriesFlag = false"
/>
<smsQueries ref="smsQueriesRef" v-if="smsQueriesFlag" @close="smsQueriesFlag = false" />
<!-- 系统配置 -->
<Config ref="ConfigRef" @flushed="inquire" />
<!-- 短信发送 -->
<Send ref="SendRef" />
<!-- 报表导出 -->
<ReportForms ref="reportForms" />
</div>
@@ -200,6 +169,7 @@ import socketClient from "@/utils/webSocketClient";
import { useStore } from "vuex";
import Config from "./components/config.vue";
import ReportForms from "./components/reportForms.vue";
import Send from "./components/send.vue";
import { exportLineData, refreshRedis } from "@/api/statistics/index";
import { ElMessage } from "element-plus";
@@ -230,6 +200,7 @@ const timeInfo: any = reactive({
});
const timeType = ref(3);
const reportForms = ref();
const SendRef = ref();
// 适配处理
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
// 连接webSocket客户端
@@ -327,6 +298,9 @@ const handleClick = (type: string) => {
ElMessage.success("刷新缓存成功");
});
}
if (type === "7") {
SendRef.value.open("短信发送");
}
}, 100);
};

2
vite.config.ts
View File

@@ -57,7 +57,7 @@ export default ({ command, mode }) => {
// target: "http://192.168.1.133:18093",
//target: "http://192.168.1.62:10215",
// target: 'http://192.168.1.127:18093', //cdf
target: "http://192.168.1.103:19001", //cdf
target: "http://192.168.2.130:18093", //cdf
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/api/, ""),