Compare commits
13 Commits
2025-09
...
7769c8db01
| Author | SHA1 | Date | |
|---|---|---|---|
|
7769c8db01 | ||
|
|
c244b5b137 | ||
|
|
cff1867dae | ||
|
|
d712f683b3 | ||
|
|
98b9bbce0d | ||
|
|
da63aa8abe | ||
|
|
920fecc9a7 | ||
|
|
791893ca38 | ||
|
|
5d4d523111 | ||
|
|
ea14a290b7 | ||
|
|
7c8917a2cd | ||
|
|
72074c65ba | ||
|
|
58c722ab3a |
1
components.d.ts
vendored
1
components.d.ts
vendored
@@ -22,7 +22,6 @@ declare module '@vue/runtime-core' {
|
||||
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElDrawer: typeof import('element-plus/es')['ElDrawer']
|
||||
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>电压暂降监测平台</title>
|
||||
<title>无锡电能质量演示平台</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -95,8 +95,8 @@ export function getEventList(data) {
|
||||
export function clickImage(data) {
|
||||
return http.request({
|
||||
url: "/scale/clickImage",
|
||||
method: "get",
|
||||
params: data,
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -258,7 +258,6 @@ export function rightImportOpenDetail(data: object) {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 对象类型
|
||||
export function getDicTree(data: object) {
|
||||
return service({
|
||||
@@ -295,13 +294,12 @@ export function exportForms(data: object) {
|
||||
responseType: "blob",
|
||||
});
|
||||
}
|
||||
// 报表导出
|
||||
export function exportLineData() {
|
||||
return service({
|
||||
url: "/largescreen/exportLineData",
|
||||
method: "post",
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
responseType: "blob",
|
||||
});
|
||||
}
|
||||
|
||||
@@ -54,6 +54,12 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">传输设备</div>
|
||||
<div class="code-name">&#xe67a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">告警</div>
|
||||
@@ -78,9 +84,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1752716651599') format('woff2'),
|
||||
url('iconfont.woff?t=1752716651599') format('woff'),
|
||||
url('iconfont.ttf?t=1752716651599') format('truetype');
|
||||
src: url('iconfont.woff2?t=1761527493132') format('woff2'),
|
||||
url('iconfont.woff?t=1761527493132') format('woff'),
|
||||
url('iconfont.ttf?t=1761527493132') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@@ -106,6 +112,15 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-chuanshushebei"></span>
|
||||
<div class="name">
|
||||
传输设备
|
||||
</div>
|
||||
<div class="code-name">.icon-chuanshushebei
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-gaojing"></span>
|
||||
<div class="name">
|
||||
@@ -142,6 +157,14 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-chuanshushebei"></use>
|
||||
</svg>
|
||||
<div class="name">传输设备</div>
|
||||
<div class="code-name">#icon-chuanshushebei</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-gaojing"></use>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4977098 */
|
||||
src: url('iconfont.woff2?t=1752716651599') format('woff2'),
|
||||
url('iconfont.woff?t=1752716651599') format('woff'),
|
||||
url('iconfont.ttf?t=1752716651599') format('truetype');
|
||||
src: url('iconfont.woff2?t=1761527493132') format('woff2'),
|
||||
url('iconfont.woff?t=1761527493132') format('woff'),
|
||||
url('iconfont.ttf?t=1761527493132') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -13,6 +13,10 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-chuanshushebei:before {
|
||||
content: "\e67a";
|
||||
}
|
||||
|
||||
.icon-gaojing:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -5,6 +5,13 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "21053723",
|
||||
"name": "传输设备",
|
||||
"font_class": "chuanshushebei",
|
||||
"unicode": "e67a",
|
||||
"unicode_decimal": 59002
|
||||
},
|
||||
{
|
||||
"icon_id": "36284864",
|
||||
"name": "告警",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
src/assets/img/txzcwzj.png
Normal file
BIN
src/assets/img/txzcwzj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 916 B |
@@ -802,7 +802,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
|
||||
}, 500)
|
||||
|
||||
if (waveDatas && waveDatas.length > 1) {
|
||||
const waveDatasTemp = waveDatas.slice(1).reverse()
|
||||
const waveDatasTemp = waveDatas.slice(1)
|
||||
for (let step = 0; step < waveDatasTemp.length; step++) {
|
||||
drawPics(waveDatasTemp[step], picHeight, step, show, myChartes, rmscm, rmscu, titleText)
|
||||
}
|
||||
@@ -881,19 +881,14 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
top: '10px',
|
||||
trigger: 'axis',
|
||||
borderColor: 'grey',
|
||||
backgroundColor: '#fff',
|
||||
style: {
|
||||
color: '#fff',
|
||||
fontSize: '15px',
|
||||
padding: 10
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
let tips = '时刻:' + params[0].data[0] + '</br/>'
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
if (params[i].seriesName != '暂降触发点') {
|
||||
tips += params[i].seriesName + ':' + (params[i].value[1] - 0).toFixed(2) + '<br/>'
|
||||
tips += params[i].marker + params[i].seriesName + ':' + (params[i].value[1] - 0).toFixed(2) + '<br/>'
|
||||
}
|
||||
}
|
||||
return tips
|
||||
@@ -904,11 +899,12 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: titlename || title,
|
||||
text: '',//titlename || title,
|
||||
textStyle: {
|
||||
fontSize: '0.8rem',
|
||||
color: props.DColor ? '#fff' : echartsColor.WordColor
|
||||
|
||||
@@ -530,7 +530,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
|
||||
}, 400)
|
||||
|
||||
if (waveDatas && waveDatas.length > 1) {
|
||||
const waveDatasTemp = waveDatas.slice(1).reverse()
|
||||
const waveDatasTemp = waveDatas.slice(1)
|
||||
for (let step = 0; step < waveDatasTemp.length; step++) {
|
||||
drawPics(waveDatasTemp[step], picHeight, step, show, myChartes, titleText)
|
||||
}
|
||||
@@ -638,7 +638,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: titlename || title,
|
||||
text: '',//titlename || title,
|
||||
textStyle: {
|
||||
fontSize: '0.8rem',
|
||||
color: props.DColor ? '#fff' : echartsColor.WordColor
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createStore, Store, useStore } from "vuex";
|
||||
import { login } from "@/api/login/login";
|
||||
import { initLedger, queryConfig } from "@/api/statistics/index";
|
||||
import { set } from "xe-utils";
|
||||
// const store = useStore();
|
||||
|
||||
// 定义状态接口
|
||||
@@ -18,6 +19,8 @@ interface State {
|
||||
eventValue: number;
|
||||
eventDuration: number;
|
||||
realData: []; //实时数据
|
||||
iframeLoad: boolean;
|
||||
showMap: boolean;
|
||||
}
|
||||
|
||||
// 初始状态
|
||||
@@ -35,11 +38,14 @@ const state: State = {
|
||||
eventValue: 0.7,
|
||||
eventDuration: 5,
|
||||
realData: [], //实时数据
|
||||
iframeLoad: false,//无锡接线图是否加载完成
|
||||
showMap: true,//无锡地图显示
|
||||
};
|
||||
|
||||
// 定义Mutation类型
|
||||
enum Mutations {
|
||||
INCREMENT = "INCREMENT",
|
||||
SET_STATE= "SET_STATE",
|
||||
SET_TOKEN = "SET_TOKEN",
|
||||
SET_TIME = "SET-TIME",
|
||||
SET_CONFIG = "SET-CONFIG-TIME",
|
||||
@@ -51,6 +57,10 @@ export default createStore({
|
||||
[Mutations.INCREMENT](state: State) {
|
||||
state.count++;
|
||||
},
|
||||
[Mutations.SET_STATE](state: State, data: any) {
|
||||
console.log("🚀 ~ data:", data)
|
||||
state[data.key] = data.value;
|
||||
},
|
||||
[Mutations.SET_TOKEN](state: State, data: any) {
|
||||
window.sessionStorage.setItem("token", data.token);
|
||||
window.sessionStorage.setItem("deptId", data.deptId);
|
||||
@@ -96,6 +106,9 @@ export default createStore({
|
||||
increment({ commit }) {
|
||||
commit(Mutations.INCREMENT);
|
||||
},
|
||||
setStateKey({ commit }, data: any) {
|
||||
commit(Mutations.SET_STATE,data);
|
||||
},
|
||||
setTimeType({ commit }, data: any) {
|
||||
commit(Mutations.SET_TIME, data);
|
||||
},
|
||||
|
||||
459
src/views/SagTraceResult_WX/components/bdMap.vue
Normal file
459
src/views/SagTraceResult_WX/components/bdMap.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<template>
|
||||
<div v-loading="loading" element-loading-background="#343849c7">
|
||||
<div class="iconBox">
|
||||
<div class="div">
|
||||
<img src="@/assets/jcd.png" alt="" />
|
||||
<span>变电站</span>
|
||||
</div>
|
||||
|
||||
<div class="div">
|
||||
<img src="@/assets/img/txzcwzj.png" alt="" />
|
||||
<span>监测点</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bmSelect">
|
||||
<el-select
|
||||
v-model="value"
|
||||
@change="setIcon"
|
||||
placeholder="变电站筛选"
|
||||
filterable
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in siteList"
|
||||
:key="item.stationName"
|
||||
:label="item.stationName"
|
||||
:value="item.stationName"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<baidu-map
|
||||
ref="mapRef"
|
||||
class="bm-view"
|
||||
:max-zoom="15"
|
||||
:min-zoom="10"
|
||||
:zoom="zoom"
|
||||
@zoomend="syncCenterAndZoom"
|
||||
@moveend="checkMapData"
|
||||
@ready="handler"
|
||||
:center="center"
|
||||
:scroll-wheel-zoom="false"
|
||||
:double-click-zoom="false"
|
||||
>
|
||||
<!-- 线-->
|
||||
<div v-if="zoom > 13">
|
||||
<bm-polyline
|
||||
:path="path"
|
||||
v-for="(path, index) in polyline"
|
||||
:key="index"
|
||||
></bm-polyline>
|
||||
</div>
|
||||
|
||||
<!-- 变电站-->
|
||||
<template v-if="zoom > 13">
|
||||
<bm-marker
|
||||
:position="path"
|
||||
v-for="path in siteList"
|
||||
:key="path.subId"
|
||||
:icon="path.icon"
|
||||
@click="markerClick(path)"
|
||||
></bm-marker>
|
||||
</template>
|
||||
<!-- 点 -->
|
||||
<div maxZoom="12">
|
||||
<bm-marker
|
||||
:position="path"
|
||||
v-for="path in areaLineInfo"
|
||||
:key="path.lineId"
|
||||
:icon="path.icon"
|
||||
@click="pointClick(path)"
|
||||
></bm-marker>
|
||||
</div>
|
||||
<bm-marker
|
||||
:position="infoWindowPoint"
|
||||
:icon="{ url: '1', size: { width: 0, height: 0 } }"
|
||||
>
|
||||
<bm-info-window
|
||||
:show="infoWindowPoint.show"
|
||||
@close="infoWindowPoint.show = false"
|
||||
>
|
||||
</bm-info-window>
|
||||
</bm-marker>
|
||||
</baidu-map>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, nextTick, onMounted } from "vue";
|
||||
import { substationCount } from "@/api/statistics/index";
|
||||
import { useStore } from "vuex";
|
||||
// import { BmlMarkerClusterer } from "vue-baidu-map-3x";
|
||||
const emit = defineEmits(["pointClick"]);
|
||||
const store = useStore();
|
||||
const mapRef = ref<any>(null); // 地图容器的ref
|
||||
const mapInstance: any = ref(null); // 百度地图实例
|
||||
const BMapInstance: any = ref(null); // BMap对象
|
||||
const loading = ref(false);
|
||||
const dataList: any = ref([]);
|
||||
const polyline = ref<any>([]);
|
||||
const zoom = ref(11);
|
||||
const areaLineInfo = ref<any>([]);
|
||||
const siteList = ref<any>([]);
|
||||
const infoWindowPoint = ref<any>({
|
||||
lng: 0,
|
||||
lat: 0,
|
||||
show: false,
|
||||
});
|
||||
const center = ref({
|
||||
lng: 120.124367,
|
||||
lat: 31.555421,
|
||||
});
|
||||
const value = ref("");
|
||||
const handler = async ({ BMap, map }: any) => {
|
||||
if (!BMap.MarkerClusterer) {
|
||||
// await import("/offline/libs/MarkerClusterer_min.js");
|
||||
}
|
||||
mapInstance.value = map;
|
||||
BMapInstance.value = BMap;
|
||||
|
||||
// 监听地图容器的鼠标滚轮事件
|
||||
const mapDom = mapRef.value.$el; // 获取地图DOM元素
|
||||
mapDom.addEventListener("mousewheel", handleMapWheel, { passive: false });
|
||||
};
|
||||
|
||||
// 点击变电站\监测点
|
||||
const markerClick = (e: any) => {
|
||||
zoom.value = 15;
|
||||
infoWindowPoint.value = e;
|
||||
infoWindowPoint.value.show = true;
|
||||
center.value.lng = 120.124367;
|
||||
center.value.lat = 31.555421;
|
||||
|
||||
setTimeout(() => {
|
||||
center.value.lng = e.lng;
|
||||
center.value.lat = e.lat + 0.01;
|
||||
}, 0);
|
||||
};
|
||||
// 点击监测点
|
||||
const pointClick = (e: any) => {
|
||||
emit("pointClick", e);
|
||||
store.dispatch("setStateKey", { key: "showMap", value: false });
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
loading.value = true;
|
||||
siteList.value = [];
|
||||
polyline.value = [];
|
||||
dataList.value = [];
|
||||
areaLineInfo.value = [];
|
||||
// substationCount({
|
||||
// deptId: store.state.deptId,
|
||||
// type: store.state.timeType,
|
||||
// startTime: store.state.timeValue[0],
|
||||
// endTime: store.state.timeValue[1],
|
||||
// }).then((res: any) => {
|
||||
// dataList.value = res.data;
|
||||
dataList.value = [
|
||||
{
|
||||
stationId: 156,
|
||||
stationName: "110kV北京电视台变",
|
||||
gdName: "检修分公司",
|
||||
longitude: 120.33,
|
||||
latitude: 31.52,
|
||||
lineCount: 1,
|
||||
eventCount: 1,
|
||||
lineEventDetails: [
|
||||
{
|
||||
gdName: "检修分公司",
|
||||
pictureId: "5debb8bd0ce26527675eedffd74a3198",
|
||||
pictureName: "无锡线上",
|
||||
},
|
||||
{
|
||||
gdName: "检修分公司",
|
||||
pictureId: "35b1301833e3fdfc872b1a27a17c7245",
|
||||
pictureName: "无锡修改1011--工程部",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
let data = dataList.value;
|
||||
let r = 0.0035;
|
||||
let list = data.filter((item: any) => item.latitude != 0);
|
||||
list.forEach((item: any) => {
|
||||
// 变电站图标
|
||||
item.icon = {
|
||||
url: new URL("@/assets/jcd.png", import.meta.url).href,
|
||||
size: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
},
|
||||
};
|
||||
if (
|
||||
item.lineEventDetails?.length > 10 &&
|
||||
item.lineEventDetails?.length < 100
|
||||
) {
|
||||
r = 0.0055;
|
||||
} else if (item.lineEventDetails.length >= 100) {
|
||||
r = 0.01055;
|
||||
}
|
||||
item.lng = item.longitude;
|
||||
item.lat = item.latitude;
|
||||
item.lineEventDetails.forEach((val: any, i: number) => {
|
||||
val.lng =
|
||||
item.longitude +
|
||||
r * Math.cos((2 * Math.PI * i) / item.lineEventDetails.length);
|
||||
val.lat =
|
||||
item.latitude +
|
||||
r * Math.sin((2 * Math.PI * i) / item.lineEventDetails.length);
|
||||
// 监测点图标
|
||||
val.icon = {
|
||||
url: new URL("@/assets/img/txzcwzj.png", import.meta.url).href,
|
||||
size: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
},
|
||||
};
|
||||
|
||||
polyline.value.push([
|
||||
{
|
||||
lng: item.lng,
|
||||
lat: item.lat,
|
||||
},
|
||||
{
|
||||
lng: val.lng,
|
||||
lat: val.lat,
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
areaLineInfo.value.push(...item.lineEventDetails);
|
||||
});
|
||||
|
||||
siteList.value = list;
|
||||
|
||||
// zoom.value = 12;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 0);
|
||||
// });
|
||||
};
|
||||
const moveenFlag = ref(true);
|
||||
|
||||
const checkMapData = () => {
|
||||
if (!mapInstance.value || !BMapInstance.value || !moveenFlag.value) return;
|
||||
|
||||
// 获取地图容器
|
||||
const container = mapInstance.value.getContainer();
|
||||
|
||||
setTimeout(() => {
|
||||
try {
|
||||
// 1. 获取所有图片瓦片
|
||||
const tiles = Array.from(container.querySelectorAll("img"));
|
||||
|
||||
// 2. 检查是否有离线地图瓦片
|
||||
const hasOfflineTiles = tiles.some((tile: any) => {
|
||||
// 确保tile是有效的DOM元素
|
||||
if (!tile || !tile.src) return false;
|
||||
|
||||
// 检查是否是离线瓦片
|
||||
return tile.src.includes("/plugin/offline/tiles/");
|
||||
});
|
||||
|
||||
// 3. 如果没有离线瓦片，回到默认位置
|
||||
if (!hasOfflineTiles) {
|
||||
console.warn("当前区域无离线地图数据，将返回默认位置");
|
||||
|
||||
// 使用正确的BMap.Point创建方式
|
||||
const point = new BMapInstance.value.Point(116.404367, 39.915421);
|
||||
|
||||
// 平滑移动并设置合适缩放级别
|
||||
mapInstance.value.panTo(point);
|
||||
mapInstance.value.setZoom(12);
|
||||
// zoom.value = 12;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("地图检测出错:", error);
|
||||
}
|
||||
}, 1000); // 适当缩短延迟时间
|
||||
};
|
||||
|
||||
// 处理地图滚轮缩放，修正scale导致的坐标偏移
|
||||
const handleMapWheel = (e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
if (!mapInstance.value || !BMapInstance.value) return;
|
||||
|
||||
// 1. 获取当前缩放比例（假设你通过scale变量控制，需替换为你的实际scale值）
|
||||
const scaleWidth: any = window.sessionStorage.getItem("scaleWidth"); // 你的水平缩放比例
|
||||
const scaleHeight: any = window.sessionStorage.getItem("scaleheight"); // 你的垂直缩放比例
|
||||
|
||||
// 2. 获取地图容器的位置和尺寸（原始DOM尺寸，未被scale影响）
|
||||
const rect = mapRef.value.$el.getBoundingClientRect();
|
||||
|
||||
// 3. 计算鼠标在地图容器内的原始坐标（未修正）
|
||||
const mouseXRaw = e.clientX - rect.left;
|
||||
const mouseYRaw = e.clientY - rect.top;
|
||||
|
||||
// 4. 修正坐标：除以缩放比例，得到scale前的原始坐标（地图实际识别的坐标）
|
||||
const mouseX = mouseXRaw / scaleWidth;
|
||||
const mouseY = mouseYRaw / scaleHeight;
|
||||
|
||||
// 5. 将修正后的坐标转换为百度地图的经纬度
|
||||
const point = new BMapInstance.value.Pixel(mouseX, mouseY);
|
||||
const lngLat = mapInstance.value.pixelToPoint(point); // 像素坐标转经纬度
|
||||
|
||||
// 6. 执行缩放（滚轮向上放大，向下缩小）
|
||||
const zoomDelta = e.deltaY < 0 ? 1 : -1; // 滚轮方向
|
||||
const newZoom = mapInstance.value.getZoom() + zoomDelta;
|
||||
if (newZoom < 10 || newZoom > 15) return; // 限制缩放范围（百度地图默认范围）
|
||||
|
||||
// 7. 缩放时保持鼠标指向的位置不变（核心：先缩放再移中心点）
|
||||
mapInstance.value.setZoom(newZoom);
|
||||
mapInstance.value.setCenter(lngLat); // 让鼠标指向的位置成为新中心
|
||||
};
|
||||
const syncCenterAndZoom = (e: any) => {
|
||||
zoom.value = e.target.getZoom();
|
||||
checkMapData();
|
||||
};
|
||||
//点击过滤位置
|
||||
const setIcon = (e: string) => {
|
||||
moveenFlag.value = false;
|
||||
siteList.value.forEach((item: any) => {
|
||||
if (item.stationName == e) {
|
||||
center.value.lng = 120.124367;
|
||||
center.value.lat = 31.555421;
|
||||
setTimeout(() => {
|
||||
center.value.lng = item.lng;
|
||||
center.value.lat = item.lat + 0.01;
|
||||
infoWindowPoint.value = item;
|
||||
infoWindowPoint.value.show = true;
|
||||
zoom.value = 15;
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
moveenFlag.value = true;
|
||||
}, 1500);
|
||||
};
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
setIcon,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@use "@/assets/scss/index.scss";
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 600px;
|
||||
}
|
||||
.bm-view {
|
||||
width: 100%;
|
||||
height: 980px;
|
||||
}
|
||||
.iconBox {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
z-index: 2000;
|
||||
width: 110px;
|
||||
height: 70px;
|
||||
padding: 10px;
|
||||
background: #ffffff10 !important;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
font-size: 12px;
|
||||
|
||||
.div {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-descriptions__title) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-descriptions__content) {
|
||||
color: #fff;
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__body) {
|
||||
color: #fff;
|
||||
background-color: rgb(0 0 0 / 0%) !important;
|
||||
}
|
||||
:deep(.el-descriptions__label) {
|
||||
color: #fff;
|
||||
// display: inline-block;
|
||||
width: 80px;
|
||||
text-align: right; /* 右对齐 */
|
||||
}
|
||||
:deep(.BMap_pop .BMap_center) {
|
||||
background-color: #343849c7;
|
||||
}
|
||||
.descriptionsBox {
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.BMap_cpyCtrl {
|
||||
display: none;
|
||||
}
|
||||
.anchorBL {
|
||||
display: none;
|
||||
} /* 地图容器样式 */
|
||||
.baidu-map-container {
|
||||
/* 消除可能的缝隙 */
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
/* .BMap_pop div {
|
||||
background-color: #343849c7 !important;
|
||||
} */
|
||||
.BMap_top,
|
||||
.BMap_bottom {
|
||||
background-color: #343849c7 !important;
|
||||
}
|
||||
/* .BMap_pop div:nth-child(1) {
|
||||
background-color: #343849c7 !important;
|
||||
} */
|
||||
.BMap_pop > div:nth-child(1) > div,
|
||||
.BMap_pop > div:nth-child(3) > div,
|
||||
.BMap_pop > div:nth-child(5) > div,
|
||||
.BMap_pop > div:nth-child(7) > div {
|
||||
background-color: #343849c7 !important;
|
||||
}
|
||||
.BMap_pop > div:nth-child(8) > img {
|
||||
display: none;
|
||||
}
|
||||
.BMap_pop > div:nth-child(8) {
|
||||
/* 设置边框宽度和颜色，上边框为可见颜色，其他边框为透明 */
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 20px solid #343849c7; /* 倒三角的颜色 */
|
||||
transform: translateX(-26px) translateY(24px);
|
||||
/* 可选：添加阴影增强视觉效果 */
|
||||
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
|
||||
}
|
||||
.bmSelect {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
z-index: 2000;
|
||||
}
|
||||
</style>
|
||||
@@ -74,7 +74,7 @@
|
||||
<el-table-column
|
||||
prop="duration"
|
||||
align="center"
|
||||
label="持续时间(S)"
|
||||
label="持续时间(s)"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column fixed="right" label="操作" width="80" align="center">
|
||||
@@ -203,7 +203,7 @@ const exportTable = async () => {
|
||||
"用户",
|
||||
"触发类型",
|
||||
"残余电压(%)",
|
||||
"持续时间(S)",
|
||||
"持续时间(s)",
|
||||
],
|
||||
];
|
||||
|
||||
|
||||
@@ -44,6 +44,7 @@
|
||||
<el-form-item label="运维单位">
|
||||
<el-tree-select
|
||||
v-model="deptsIndex"
|
||||
:teleported="false"
|
||||
:data="deptsList"
|
||||
:render-after-expand="false"
|
||||
clearable
|
||||
@@ -95,8 +96,8 @@
|
||||
style="width: 150px"
|
||||
size="small"
|
||||
:max="100"
|
||||
:precision="1"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
@change="
|
||||
(e) => (e == null ? (eventForm.eventValueMin = 1) : null)
|
||||
"
|
||||
@@ -112,8 +113,8 @@
|
||||
style="width: 150px"
|
||||
size="small"
|
||||
:max="100"
|
||||
:precision="1"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
@change="
|
||||
(e) => (e == null ? (eventForm.eventValueMax = 1) : null)
|
||||
"
|
||||
@@ -129,13 +130,13 @@
|
||||
style="width: 150px"
|
||||
size="small"
|
||||
:max="1000000"
|
||||
:precision="1"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
@change="
|
||||
(e) => (e == null ? (eventForm.eventDurationMin = 1) : null)
|
||||
"
|
||||
><template #suffix>
|
||||
<span>ms</span>
|
||||
<span>s</span>
|
||||
</template></el-input-number
|
||||
>
|
||||
<span> < 持续时间 < </span>
|
||||
@@ -146,13 +147,13 @@
|
||||
style="width: 150px"
|
||||
size="small"
|
||||
:max="1000000"
|
||||
:precision="1"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
@change="
|
||||
(e) => (e == null ? (eventForm.eventDurationMax = 1) : null)
|
||||
"
|
||||
><template #suffix>
|
||||
<span>ms</span>
|
||||
<span>s</span>
|
||||
</template></el-input-number
|
||||
>
|
||||
</el-form-item>
|
||||
@@ -261,7 +262,7 @@
|
||||
<el-table-column
|
||||
prop="duration"
|
||||
align="center"
|
||||
label="持续时间(S)"
|
||||
label="持续时间(s)"
|
||||
width="90"
|
||||
/>
|
||||
<el-table-column fixed="right" label="操作" width="80" align="center">
|
||||
@@ -489,7 +490,7 @@ const exportTable = async () => {
|
||||
"用户",
|
||||
"触发类型",
|
||||
"残余电压(%)",
|
||||
"持续时间(S)",
|
||||
"持续时间(s)",
|
||||
],
|
||||
];
|
||||
|
||||
|
||||
@@ -1,12 +1,19 @@
|
||||
<template>
|
||||
<!-- 配网计算 -->
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<splitpanes
|
||||
style="height: 100%"
|
||||
class="default-theme"
|
||||
id="navigation-splitpanes"
|
||||
>
|
||||
<pane :size="20">
|
||||
<PointTree :showSelect="false" @node-click="handleNodeClick" @init="handleNodeClick"></PointTree>
|
||||
<PointTree
|
||||
:showSelect="false"
|
||||
@node-click="handleNodeClick"
|
||||
@init="handleNodeClick"
|
||||
></PointTree>
|
||||
</pane>
|
||||
|
||||
<pane style="background-color: rgba(44, 46, 60, 0.1)" :size="100 - size">
|
||||
|
||||
<el-form :model="form" inline label-width="auto">
|
||||
<el-form-item label="谐波类型">
|
||||
<el-radio-group v-model="form.type">
|
||||
@@ -15,86 +22,217 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="谐波次数">
|
||||
<el-select v-model="form.index" filterable multiple :multiple-limit="5" collapse-tags collapse-tags-tooltip
|
||||
clearable placeholder="请选择次数" style="width: 200px" size="small">
|
||||
<el-option v-for="item in 49" :key="item" :label="item + 1 + '次'" :value="item + 1"></el-option>
|
||||
<el-select
|
||||
v-model="form.index"
|
||||
filterable
|
||||
multiple
|
||||
:multiple-limit="5"
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
clearable
|
||||
placeholder="请选择次数"
|
||||
style="width: 200px"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in 49"
|
||||
:key="item"
|
||||
:label="item + 1 + '次'"
|
||||
:value="item + 1"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="负荷数据">
|
||||
<el-select v-model="form.loadDataId" clearable filterable placeholder="请选择负荷数据" style="width: 200px"
|
||||
size="small">
|
||||
<el-option v-for="item in loadDataOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
<el-select
|
||||
v-model="form.loadDataId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择负荷数据"
|
||||
style="width: 200px"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in loadDataOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<!-- <el-button type="primary" icon="el-icon-Plus" @click="push('/admin/division/aListOfLoadData')">
|
||||
新增
|
||||
</el-button> -->
|
||||
<el-button type="primary" :icon="Select" @click="submit" size="small">确定</el-button>
|
||||
<el-button type="primary" :icon="Select" @click="submit" size="small"
|
||||
>确定</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-tabs v-model="activeName" v-if="showTabs" style="height: 740px">
|
||||
<el-tab-pane v-for="(item, index) in tabList" :key="item" :label="item.label" :name="index"
|
||||
style="height: 100%">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in tabList"
|
||||
:key="item"
|
||||
:label="item.label"
|
||||
:name="index"
|
||||
style="height: 100%"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<span style="color: #fff">时间范围</span>
|
||||
<el-date-picker v-model="item.time" class="mr10 ml10" type="daterange" start-placeholder="起始时间"
|
||||
end-placeholder="结束时间" format="YYYY-MM-DD" date-format="YYYY-MM-DD" time-format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD" :disabled-date="handleDisabledDate" size="small" />
|
||||
<el-button type="primary" :icon="CaretRight" @click="execute(item, index)" size="small">
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
class="mr10 ml10"
|
||||
type="daterange"
|
||||
start-placeholder="起始时间"
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD"
|
||||
date-format="YYYY-MM-DD"
|
||||
time-format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled-date="handleDisabledDate"
|
||||
size="small"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="CaretRight"
|
||||
@click="execute(item, index)"
|
||||
size="small"
|
||||
>
|
||||
执行
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="item.showEcahr == 1" class="harmonicButton">
|
||||
<el-form :inline="true" v-model="item.form">
|
||||
<el-form-item label="限值" v-if="item.showDynamic">
|
||||
<el-input v-model="item.form.limit" placeholder="请选择限值" disabled style="width: 200px" size="small">
|
||||
<el-input
|
||||
v-model="item.form.limit"
|
||||
placeholder="请选择限值"
|
||||
disabled
|
||||
style="width: 200px"
|
||||
size="small"
|
||||
>
|
||||
<template #append>
|
||||
<el-button :icon="Edit" :class="[code == 0 ? 'frontBox' : '']" @click="setCode(0)" size="small" />
|
||||
<el-button
|
||||
:icon="Edit"
|
||||
:class="[code == 0 ? 'frontBox' : '']"
|
||||
@click="setCode(0)"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间点一" v-if="item.showDynamic">
|
||||
<el-input v-model="item.form.time1" placeholder="请选择时间点一" disabled style="width: 200px" size="small">
|
||||
<el-input
|
||||
v-model="item.form.time1"
|
||||
placeholder="请选择时间点一"
|
||||
disabled
|
||||
style="width: 200px"
|
||||
size="small"
|
||||
>
|
||||
<template #append>
|
||||
<el-button :icon="Edit" :class="[code == 1 ? 'frontBox' : '']" @click="setCode(1)" size="small" />
|
||||
<el-button
|
||||
:icon="Edit"
|
||||
:class="[code == 1 ? 'frontBox' : '']"
|
||||
@click="setCode(1)"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间点二" v-if="item.showDynamic">
|
||||
<el-input v-model="item.form.time2" placeholder="请选择时间点二" disabled style="width: 200px" size="small">
|
||||
<el-input
|
||||
v-model="item.form.time2"
|
||||
placeholder="请选择时间点二"
|
||||
disabled
|
||||
style="width: 200px"
|
||||
size="small"
|
||||
>
|
||||
<template #append>
|
||||
<el-button :icon="Edit" :class="[code == 2 ? 'frontBox' : '']" @click="setCode(2)" size="small" />
|
||||
<el-button
|
||||
:icon="Edit"
|
||||
:class="[code == 2 ? 'frontBox' : '']"
|
||||
@click="setCode(2)"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-button type="primary" :icon="Document" @click="generateFn" v-if="!item.showDynamic" size="small">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="Document"
|
||||
@click="generateFn"
|
||||
v-if="!item.showDynamic"
|
||||
size="small"
|
||||
>
|
||||
生成动态谐波责任数据
|
||||
</el-button>
|
||||
<el-button type="primary" :icon="Document" v-else @click="generateMetrics" size="small">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="Document"
|
||||
v-else
|
||||
@click="generateMetrics"
|
||||
size="small"
|
||||
>
|
||||
生成谐波责任指标
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="box" v-loading="loading" element-loading-background="#343849c7">
|
||||
<MyEChart :options="item.options" v-if="item.showEcahr == 1" @group="group" />
|
||||
<el-empty description="时间范围内无谐波数据" v-if="item.showEcahr == 2" />
|
||||
<div
|
||||
class="box"
|
||||
v-loading="loading"
|
||||
element-loading-background="#343849c7"
|
||||
>
|
||||
<MyEChart
|
||||
:options="item.options"
|
||||
v-if="item.showEcahr == 1"
|
||||
@group="group"
|
||||
/>
|
||||
<el-empty
|
||||
description="时间范围内无谐波数据"
|
||||
v-if="item.showEcahr == 2"
|
||||
/>
|
||||
</div>
|
||||
<!-- 生成动态谐波责任数据 -->
|
||||
<div class="box boxTab" v-loading="loading1" element-loading-background="#343849c7">
|
||||
<MyEChart :options="item.dynamicOptions" style="flex: 1" v-if="item.showDynamic" />
|
||||
<div style="width: 500px" v-if="item.showDynamic" class="tableBox">
|
||||
<el-table :scrollbar-always-on="true" ref="tableRef" :data="item.dynamicData" height="280px"
|
||||
size="small" :header-cell-style="{ textAlign: 'center' }" border>
|
||||
<el-table-column prop="customerName" align="center" label="用户名(用户号)" />
|
||||
<el-table-column prop="responsibilityData" align="center" label="责任数据(%)" width="120">
|
||||
<div
|
||||
class="box boxTab"
|
||||
v-loading="loading1"
|
||||
element-loading-background="#343849c7"
|
||||
>
|
||||
<MyEChart
|
||||
:options="item.dynamicOptions"
|
||||
style="flex: 1"
|
||||
v-if="item.showDynamic"
|
||||
/>
|
||||
<div
|
||||
style="width: 500px"
|
||||
v-if="item.showDynamic"
|
||||
class="tableBox"
|
||||
>
|
||||
<el-table
|
||||
:scrollbar-always-on="true"
|
||||
ref="tableRef"
|
||||
:data="item.dynamicData"
|
||||
height="280px"
|
||||
size="small"
|
||||
:header-cell-style="{ textAlign: 'center' }"
|
||||
border
|
||||
>
|
||||
<el-table-column
|
||||
prop="customerName"
|
||||
align="center"
|
||||
label="用户名(用户号)"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="responsibilityData"
|
||||
align="center"
|
||||
label="责任数据(%)"
|
||||
width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{
|
||||
Math.floor(scope.row.responsibilityData * 10000) /
|
||||
10000
|
||||
Math.floor(scope.row.responsibilityData * 10000) / 10000
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -106,7 +244,6 @@
|
||||
</el-tabs>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -142,6 +279,7 @@ const xAxisData = ref([]);
|
||||
const loading = ref(false);
|
||||
const loading1 = ref(false);
|
||||
const tabList: any = ref([]);
|
||||
const time: any = ref([]);
|
||||
const activeName = ref(0);
|
||||
const xValue = ref("");
|
||||
const showTabs = ref(false);
|
||||
@@ -158,8 +296,7 @@ const handleNodeClick = (data: any) => {
|
||||
dotList.value = data;
|
||||
setTimeout(() => {
|
||||
emit("setTitle", data.alias);
|
||||
}, 0)
|
||||
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -201,11 +338,12 @@ const submit = () => {
|
||||
showTabs.value = true;
|
||||
let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b);
|
||||
tabList.value = [];
|
||||
time.value = [timeList.startTime, timeList.endTime];
|
||||
list.forEach((item: any) => {
|
||||
tabList.value.push({
|
||||
label: item + "次谐波",
|
||||
key: item,
|
||||
time: [timeList.startTime, timeList.endTime],
|
||||
time: [],
|
||||
showExecute: false,
|
||||
form: {
|
||||
limit: "",
|
||||
@@ -230,8 +368,8 @@ const execute = async (item: any, index: number) => {
|
||||
tabList.value[activeName.value].showDynamic = false;
|
||||
loading.value = true;
|
||||
await getHistoryHarmData({
|
||||
searchBeginTime: item.time[0],
|
||||
searchEndTime: item.time[1],
|
||||
searchBeginTime: time.value[0],
|
||||
searchEndTime: time.value[1],
|
||||
type: form.type,
|
||||
time: item.key,
|
||||
lineId: dotList.value.id,
|
||||
@@ -616,10 +754,6 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
@@ -683,7 +817,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: #fffFFF80 !important;
|
||||
background-color: #ffffff80 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -697,6 +831,5 @@ defineExpose({
|
||||
right: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -321,6 +321,7 @@ import {
|
||||
harmOneImage,
|
||||
hasUpEventList,
|
||||
} from "@/api/manage_wx/index";
|
||||
|
||||
import { HelpFilled, Aim, Memo } from "@element-plus/icons-vue";
|
||||
const flag = ref(0); // 0 for 暂降, 1 for 谐波, 2 for 谐波放大
|
||||
const time = ref(0); // 0 for 周, 1 for 月
|
||||
@@ -610,7 +611,11 @@ const handleChartClick = (params: any) => {
|
||||
};
|
||||
|
||||
// 定义 emit
|
||||
const emit = defineEmits(["flag-changed", "expand-detail"]);
|
||||
const emit = defineEmits([
|
||||
"flag-changed",
|
||||
"expand-detail",
|
||||
"refresh-security-detail",
|
||||
]);
|
||||
|
||||
watch(flag, (newVal) => {
|
||||
// 向父组件发送 flag 变化事件
|
||||
@@ -686,13 +691,42 @@ const initialAggregation = () => {
|
||||
|
||||
// 提取发送消息到iframe的公共方法
|
||||
const sendMessageToIframe = (type: string, payload: any) => {
|
||||
// console.log(123,store.state.iframeLoad);
|
||||
|
||||
// window.parent.postMessage(
|
||||
// {
|
||||
// type,
|
||||
// payload,
|
||||
// },
|
||||
// "*"
|
||||
// );
|
||||
// 如果 iframe 已加载完成，直接发送消息
|
||||
if (store.state.iframeLoad) {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type,
|
||||
payload,
|
||||
},
|
||||
"*"
|
||||
"*" // 建议替换为具体域名，如 'https://父页面域名'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果未加载完成，每 1 秒尝试发送一次
|
||||
const interval = setInterval(() => {
|
||||
console.log("等待 iframe 加载，1 秒后重试...");
|
||||
if (store.state.iframeLoad) {
|
||||
// 加载完成后发送消息并清除定时器
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type,
|
||||
payload,
|
||||
},
|
||||
"*" // 建议替换为具体域名
|
||||
);
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// 闪烁点
|
||||
@@ -715,7 +749,7 @@ const initHasEventList = () => {
|
||||
|
||||
const dataObject = {
|
||||
eventList: [...eventList.value],
|
||||
color: "#7ac1f9",
|
||||
color: "#375db4",
|
||||
};
|
||||
|
||||
// 发送eventList数据到iframe，注意发送的是.value而不是响应式对象本身
|
||||
@@ -751,8 +785,8 @@ const initHasUpEventList = () => {
|
||||
|
||||
const dataObject = {
|
||||
eventList: [...eventList.value],
|
||||
color: "#fcfc57",
|
||||
flagValue: '2',
|
||||
color: "#f08a0a",
|
||||
flagValue: "2",
|
||||
};
|
||||
|
||||
// 发送eventList数据到iframe，注意发送的是.value而不是响应式对象本身
|
||||
@@ -819,14 +853,13 @@ const analysisClick = (row: any) => {
|
||||
maxResponsibilityMonitorId.value = res.data
|
||||
.filter((item) => item.isImport == 1)
|
||||
.map((item) => item.lineId); // 筛选 isImport 为 1
|
||||
console.log(maxResponsibilityMonitorId.value, "890jhuj");
|
||||
}
|
||||
|
||||
const dataObject = {
|
||||
eventList: [...eventList.value],
|
||||
color: "#fcfc57",
|
||||
color: "#03de6d",
|
||||
maxResponsibilityMonitorId: [...maxResponsibilityMonitorId.value],
|
||||
maxColor: "#ff0000",
|
||||
maxColor: "#f9065b",
|
||||
};
|
||||
|
||||
// 发送eventList数据到iframe，注意发送的是.value而不是响应式对象本身
|
||||
@@ -921,10 +954,13 @@ const initialResponsibilityList = () => {
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
// 通知父组件刷新 manage/securityDetail.vue 中的数据
|
||||
emit("refresh-security-detail");
|
||||
})
|
||||
.catch((error) => {
|
||||
traceabilityTableData.value = [];
|
||||
defaultCurrentRowKey.value = null;
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1150,11 +1186,11 @@ const callHarmOneImageApi = (row: any, selectedTime: string) => {
|
||||
const dataObject = {
|
||||
eventListAll: [JSON.parse(JSON.stringify(eventListAll.value))],
|
||||
eventList: [...eventList.value],
|
||||
color: "#fcfc57",
|
||||
color: "#cf552d",
|
||||
maxResponsibilityMonitorId: [...maxResponsibilityMonitorId.value],
|
||||
maxColor: "#ff0000",
|
||||
maxColor: "#c708fe",
|
||||
backgroundPointId: [...backgroundPoint.value],
|
||||
backgroundPointColor: "#03df6d",
|
||||
backgroundPointColor: "#0936f4",
|
||||
};
|
||||
// 发送所有 monitorId 数据到 iframe
|
||||
sendMessageToIframe("SEND_KEYS_TO_IFRAME", dataObject);
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
<div>
|
||||
<span style="color: #fff">时间范围</span>
|
||||
<el-date-picker
|
||||
v-model="item.time"
|
||||
v-model="time"
|
||||
class="mr10 ml10"
|
||||
type="daterange"
|
||||
start-placeholder="起始时间"
|
||||
@@ -292,6 +292,7 @@ const xAxisData = ref([]);
|
||||
const loading = ref(false);
|
||||
const loading1 = ref(false);
|
||||
const tabList: any = ref([]);
|
||||
const time: any = ref([]);
|
||||
const activeName = ref(0);
|
||||
const xValue = ref("");
|
||||
const showTabs = ref(false);
|
||||
@@ -394,6 +395,7 @@ const submit = () => {
|
||||
showTabs.value = true;
|
||||
let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b);
|
||||
tabList.value = [];
|
||||
|
||||
list.forEach((item: any) => {
|
||||
tabList.value.push({
|
||||
label: item + "次谐波",
|
||||
@@ -418,14 +420,14 @@ const submit = () => {
|
||||
|
||||
// 执行
|
||||
const execute = async (item: any, index: number) => {
|
||||
if (item.time == undefined) {
|
||||
if (time.value == undefined || time.value.length == 0) {
|
||||
return ElMessage.warning("请选择时间范围");
|
||||
}
|
||||
tabList.value[activeName.value].showDynamic = false;
|
||||
loading.value = true;
|
||||
await getHistoryHarmData({
|
||||
searchBeginTime: item.time[0],
|
||||
searchEndTime: item.time[1],
|
||||
searchBeginTime: time.value[0],
|
||||
searchEndTime: time.value[1],
|
||||
type: form.type,
|
||||
time: item.key,
|
||||
lineId: dotList.value.id,
|
||||
|
||||
@@ -1,14 +1,23 @@
|
||||
<!-- 谐波放大表格详情 -->
|
||||
<template>
|
||||
<el-dialog v-model="visible" :close-on-click-modal="false" title="趋势图" draggable width="70%"
|
||||
@close="handleCloseDialog">
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:close-on-click-modal="false"
|
||||
title="趋势图"
|
||||
draggable
|
||||
width="70%"
|
||||
@close="handleCloseDialog"
|
||||
>
|
||||
<el-radio-group v-model="condition" size="small" @change="init">
|
||||
<el-radio-button label="谐波电压" value="42" />
|
||||
<el-radio-button label="谐波电流" value="43" />
|
||||
|
||||
</el-radio-group>
|
||||
<MyEChart v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)" :options="list[0]?.option"
|
||||
:style="`height:670px`" />
|
||||
<MyEChart
|
||||
v-loading="loading"
|
||||
element-loading-background="rgba(122, 122, 122, 0.8)"
|
||||
:options="list[0]?.option"
|
||||
:style="`height:670px`"
|
||||
/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -25,13 +34,13 @@ const options = ref<any>(null);
|
||||
const list = ref<any>([]);
|
||||
const traceability = ref<any>([]);
|
||||
const rowData: any = ref({});
|
||||
const condition: any = ref('42');
|
||||
const condition: any = ref("42");
|
||||
|
||||
const open = async (row: any) => {
|
||||
rowData.value = row;
|
||||
condition.value = '42';
|
||||
condition.value = "42";
|
||||
visible.value = true;
|
||||
init()
|
||||
init();
|
||||
};
|
||||
const init = async () => {
|
||||
list.value = [];
|
||||
@@ -48,7 +57,7 @@ const init = async () => {
|
||||
}).then((res) => {
|
||||
shujuchuli(res);
|
||||
});
|
||||
}
|
||||
};
|
||||
const shujuchuli = (res: any) => {
|
||||
list.value = [];
|
||||
let shujuData = res.data;
|
||||
@@ -56,9 +65,13 @@ const shujuchuli = (res: any) => {
|
||||
//判断是否存在暂降点
|
||||
|
||||
if (item.eventDetail == null) {
|
||||
let [min, max] = yMethod([item.minValue, item.maxValue, condition.value == '42' ? rowData.value.vavgValue : rowData.value.vavgValue.iavgValue]
|
||||
|
||||
);
|
||||
let [min, max] = yMethod([
|
||||
item.minValue,
|
||||
item.maxValue,
|
||||
condition.value == "42"
|
||||
? rowData.value.vavgValue
|
||||
: rowData.value.vavgValue.iavgValue,
|
||||
]);
|
||||
//判断是否有限值(有上下限)
|
||||
if (item.topLimit !== 0 && item.lowerLimit !== 0) {
|
||||
item.phaiscType.push("上限");
|
||||
@@ -107,7 +120,14 @@ const shujuchuli = (res: any) => {
|
||||
}
|
||||
let shuju = {
|
||||
id: "qushifenx" + i,
|
||||
title: item.lineName + "--" + item.targetName,
|
||||
title:
|
||||
item.lineName +
|
||||
"--" +
|
||||
item.targetName +
|
||||
"--" +
|
||||
"谐波次数_" +
|
||||
item.harmNum +
|
||||
"次",
|
||||
targetName: item.targetName,
|
||||
legend: item.phaiscType,
|
||||
valueName: item.unit[0],
|
||||
@@ -147,7 +167,14 @@ const shujuchuli = (res: any) => {
|
||||
}
|
||||
let shuju = {
|
||||
id: "qushifenx" + i,
|
||||
title: item.lineName + "--" + item.targetName,
|
||||
title:
|
||||
item.lineName +
|
||||
"--" +
|
||||
item.targetName +
|
||||
"--" +
|
||||
"谐波次数_" +
|
||||
item.harmNum +
|
||||
"次",
|
||||
targetName: item.targetName,
|
||||
legend: item.phaiscType,
|
||||
valueName: item.unit[0],
|
||||
@@ -163,7 +190,14 @@ const shujuchuli = (res: any) => {
|
||||
} else {
|
||||
let shuju = {
|
||||
id: "qushifenx" + i,
|
||||
title: item.lineName + "--" + item.targetName,
|
||||
title:
|
||||
item.lineName +
|
||||
"--" +
|
||||
item.targetName +
|
||||
"--" +
|
||||
"谐波次数_" +
|
||||
item.harmNum +
|
||||
"次",
|
||||
targetName: item.targetName,
|
||||
legend: item.phaiscType,
|
||||
valueName: item.unit[0],
|
||||
@@ -223,7 +257,14 @@ const shujuchuli = (res: any) => {
|
||||
}
|
||||
let shuju = {
|
||||
id: "qushifenx" + i,
|
||||
title: item.lineName + "--" + item.targetName,
|
||||
title:
|
||||
item.lineName +
|
||||
"--" +
|
||||
item.targetName +
|
||||
"--" +
|
||||
"谐波次数_" +
|
||||
item.harmNum +
|
||||
"次",
|
||||
targetName: item.targetName,
|
||||
legend: item.phaiscType,
|
||||
valueName: item.unit[0],
|
||||
@@ -260,7 +301,14 @@ const shujuchuli = (res: any) => {
|
||||
}
|
||||
let shuju = {
|
||||
id: "qushifenx" + i,
|
||||
title: item.lineName + "--" + item.targetName,
|
||||
title:
|
||||
item.lineName +
|
||||
"--" +
|
||||
item.targetName +
|
||||
"--" +
|
||||
"谐波次数_" +
|
||||
item.harmNum +
|
||||
"次",
|
||||
targetName: item.targetName,
|
||||
legend: item.phaiscType,
|
||||
valueName: item.unit[0],
|
||||
@@ -274,7 +322,14 @@ const shujuchuli = (res: any) => {
|
||||
} else {
|
||||
let shuju = {
|
||||
id: "qushifenx" + i,
|
||||
title: item.lineName + "--" + item.targetName,
|
||||
title:
|
||||
item.lineName +
|
||||
"--" +
|
||||
item.targetName +
|
||||
"--" +
|
||||
"谐波次数_" +
|
||||
item.harmNum +
|
||||
"次",
|
||||
targetName: item.targetName,
|
||||
legend: item.phaiscType,
|
||||
valueName: item.unit[0],
|
||||
@@ -330,7 +385,14 @@ const shujuchuli = (res: any) => {
|
||||
|
||||
let shuju = {
|
||||
id: "qushifenx" + i,
|
||||
title: item.lineName + "--" + item.targetName,
|
||||
title:
|
||||
item.lineName +
|
||||
"--" +
|
||||
item.targetName +
|
||||
"--" +
|
||||
"谐波次数_" +
|
||||
item.harmNum +
|
||||
"次",
|
||||
targetName: item.targetName,
|
||||
legend: item.phaiscType,
|
||||
valueName: item.unit[0],
|
||||
@@ -361,7 +423,14 @@ const shujuchuli = (res: any) => {
|
||||
}
|
||||
let shuju = {
|
||||
id: "qushifenx" + i,
|
||||
title: item.lineName + "--" + item.targetName,
|
||||
title:
|
||||
item.lineName +
|
||||
"--" +
|
||||
item.targetName +
|
||||
"--" +
|
||||
"谐波次数_" +
|
||||
item.harmNum +
|
||||
"次",
|
||||
targetName: item.targetName,
|
||||
legend: item.phaiscType,
|
||||
valueName: item.unit[0],
|
||||
@@ -374,7 +443,14 @@ const shujuchuli = (res: any) => {
|
||||
} else {
|
||||
let shuju = {
|
||||
id: "qushifenx" + i,
|
||||
title: item.lineName + "--" + item.targetName,
|
||||
title:
|
||||
item.lineName +
|
||||
"--" +
|
||||
item.targetName +
|
||||
"--" +
|
||||
"谐波次数_" +
|
||||
item.harmNum +
|
||||
"次",
|
||||
targetName: item.targetName,
|
||||
legend: item.phaiscType,
|
||||
valueName: item.unit[0],
|
||||
@@ -460,7 +536,8 @@ const rendering = () => {
|
||||
if (item.valueName == undefined) {
|
||||
item.valueName = "无";
|
||||
}
|
||||
opitonserise[0].markLine = {
|
||||
opitonserise = opitonserise.map((item) => {
|
||||
item.markLine = {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
@@ -481,10 +558,43 @@ const rendering = () => {
|
||||
data: [
|
||||
{
|
||||
name: "标准值",
|
||||
yAxis: condition.value == '42' ? rowData.value.vavgValue : rowData.value.iavgValue,
|
||||
yAxis:
|
||||
condition.value == "42"
|
||||
? rowData.value.vavgValue
|
||||
: rowData.value.iavgValue,
|
||||
},
|
||||
],
|
||||
};
|
||||
return item;
|
||||
});
|
||||
// opitonserise[0].markLine = {
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// lineStyle: {
|
||||
// type: "dashed", //dotted、solid
|
||||
// color: "#FF33FF",
|
||||
// width: 2,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// label: {
|
||||
// normal: {
|
||||
// color: "#fff",
|
||||
// formatter: function (params) {
|
||||
// return `标准值`;
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// data: [
|
||||
// {
|
||||
// name: "标准值",
|
||||
// yAxis:
|
||||
// condition.value == "42"
|
||||
// ? rowData.value.vavgValue
|
||||
// : rowData.value.iavgValue,
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
// console.log("🚀 ~ rendering ~ row.value:", rowData.value);
|
||||
|
||||
// console.log("🚀 ~ rendering ~ opitonserise:", opitonserise);
|
||||
@@ -495,7 +605,7 @@ const rendering = () => {
|
||||
};
|
||||
const getEcharts = () => {
|
||||
list.value.forEach((item: any, i: number) => {
|
||||
console.log("🚀 ~ getEcharts ~ item:", item)
|
||||
console.log("🚀 ~ getEcharts ~ item:", item);
|
||||
item.option = {
|
||||
backgroundColor: "#fff",
|
||||
title: {
|
||||
@@ -596,7 +706,6 @@ const getEcharts = () => {
|
||||
max: item.maxValue,
|
||||
name: item.valueName,
|
||||
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false, //-----------重点
|
||||
|
||||
@@ -64,7 +64,7 @@ import { clickImage, realTimeData } from "@/api/manage_wx";
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
import socketClient from "@/utils/webSocketClient";
|
||||
import DipDetail from "../eventStatistics/dipDetail.vue";
|
||||
|
||||
import { useStore } from "vuex";
|
||||
// 定义接收的 props
|
||||
const props = defineProps<{
|
||||
eventList?: [];
|
||||
@@ -111,7 +111,7 @@ const corners = ref([
|
||||
// },
|
||||
]);
|
||||
const steadyStateList = ref([]);
|
||||
|
||||
const store = useStore();
|
||||
const selectedId = ref("");
|
||||
|
||||
// 内部响应式数据
|
||||
@@ -128,7 +128,11 @@ const handleClickImage = async (elementId: string) => {
|
||||
}
|
||||
try {
|
||||
// 发送点击图片请求
|
||||
const res = await clickImage({ lineId: elementId });
|
||||
const res = await clickImage({
|
||||
lineId: elementId,
|
||||
searchBeginTime: store.state.timeValue[0],
|
||||
searchEndTime: store.state.timeValue[1],
|
||||
});
|
||||
|
||||
// 确保返回的数据是数组格式，并且过滤掉 null/undefined 元素
|
||||
let dataToStore: any[] = [];
|
||||
|
||||
@@ -10,7 +10,8 @@
|
||||
maxlength="32"
|
||||
placeholder="请输入项目名称"
|
||||
show-word-limit
|
||||
style="width: 300px; margin-left: 10px"
|
||||
clearable
|
||||
style="width: 240px; margin-left: 10px"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
@@ -35,6 +36,8 @@
|
||||
margin-top: 10px;
|
||||
height: 660px;
|
||||
"
|
||||
v-loading="loading"
|
||||
:element-loading-background="'rgba(122, 122, 122, 0.8)'"
|
||||
>
|
||||
<el-row :gutter="12">
|
||||
<el-col
|
||||
@@ -226,6 +229,7 @@ const projectData = ref([]);
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const innerVisible = ref(false);
|
||||
const loading = ref(false);
|
||||
|
||||
const projectName = ref("");
|
||||
|
||||
@@ -299,6 +303,7 @@ const sendToIframe = (type: string, data: any) => {
|
||||
};
|
||||
|
||||
const fetachData = async () => {
|
||||
loading.value = true;
|
||||
const res = await projectList({
|
||||
pageNum: params.pageNum,
|
||||
pageSize: params.pageSize,
|
||||
@@ -307,7 +312,7 @@ const fetachData = async () => {
|
||||
// projectData.splice(0, projectData.length, ...res.records);
|
||||
projectData.value = res.data.records;
|
||||
params.total = res.data.total;
|
||||
|
||||
loading.value = false;
|
||||
if (res.data.records.length > 0) {
|
||||
firstForm.value.id = res.data.records[0].id;
|
||||
firstForm.value.name = res.data.records[0].name;
|
||||
@@ -421,14 +426,14 @@ const onTableCurrentChange = (page: number) => {
|
||||
|
||||
// 设计
|
||||
const Aclick = (e: any) => {
|
||||
// window.open("http://192.168.1.179:4001" + `/zutai/?id=${e.id}&&name=decodeURI(${e.name})&&flag=false`)
|
||||
// window.open( window.location.origin + `/zutai/?id=${e.id}&&name=decodeURI(${e.name})&&flag=false`)
|
||||
// window.open(
|
||||
// window.location.origin +
|
||||
// `/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=true`
|
||||
// );
|
||||
// 无锡项目进去不展示数据绑定图元
|
||||
window.open(
|
||||
"http://192.168.1.179:4001" +
|
||||
window.location.origin +
|
||||
`/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=wx`
|
||||
);
|
||||
};
|
||||
@@ -470,7 +475,7 @@ const imgData = (e: any) => {
|
||||
// `/zutai/?id=${e.id}&&name=${e.name}&&preview=true#/preview`
|
||||
// );
|
||||
window.open(
|
||||
"http://192.168.1.179:4001" +
|
||||
window.location.origin +
|
||||
`/zutai/?id=${e.id}&&name=${e.name}&&preview=true&&graphicDisplay=wx#/preview`
|
||||
);
|
||||
};
|
||||
|
||||
@@ -85,8 +85,8 @@
|
||||
:min="0"
|
||||
style="width: 150px"
|
||||
:max="100"
|
||||
:precision="1"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
@change="
|
||||
(e) => (e == null ? (eventForm.eventValueMin = 1) : null)
|
||||
"
|
||||
@@ -101,8 +101,8 @@
|
||||
:min="0"
|
||||
style="width: 150px"
|
||||
:max="100"
|
||||
:precision="1"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
@change="
|
||||
(e) => (e == null ? (eventForm.eventValueMax = 1) : null)
|
||||
"
|
||||
@@ -117,13 +117,13 @@
|
||||
:min="0"
|
||||
style="width: 150px"
|
||||
:max="1000000"
|
||||
:precision="1"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
@change="
|
||||
(e) => (e == null ? (eventForm.eventDurationMin = 1) : null)
|
||||
"
|
||||
><template #suffix>
|
||||
<span>ms</span>
|
||||
<span>s</span>
|
||||
</template></el-input-number
|
||||
>
|
||||
<span> < 持续时间 < </span>
|
||||
@@ -133,13 +133,13 @@
|
||||
:min="0"
|
||||
style="width: 150px"
|
||||
:max="1000000"
|
||||
:precision="1"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
@change="
|
||||
(e) => (e == null ? (eventForm.eventDurationMax = 1) : null)
|
||||
"
|
||||
><template #suffix>
|
||||
<span>ms</span>
|
||||
<span>s</span>
|
||||
</template></el-input-number
|
||||
>
|
||||
</el-form-item>
|
||||
@@ -225,7 +225,7 @@
|
||||
<el-table-column
|
||||
prop="duration"
|
||||
align="center"
|
||||
label="持续时间(S)"
|
||||
label="持续时间(s)"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column fixed="right" label="操作" width="100" align="center">
|
||||
@@ -526,6 +526,7 @@ const loading = ref(false);
|
||||
|
||||
const trendChartRef = ref();
|
||||
|
||||
|
||||
// 页码
|
||||
const params = reactive({
|
||||
pageNum: 1,
|
||||
@@ -800,7 +801,7 @@ const exportTable_0 = async () => {
|
||||
"用户",
|
||||
"触发类型",
|
||||
"残余电压(%)",
|
||||
"持续时间(S)",
|
||||
"持续时间(s)",
|
||||
],
|
||||
];
|
||||
|
||||
@@ -945,9 +946,14 @@ const init = () => {
|
||||
eventList();
|
||||
};
|
||||
|
||||
const refreshResponsibilityList = () => {
|
||||
initialResponsibilityList();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
setShowDetail, // 暴露方法给父组件调用
|
||||
refreshResponsibilityList
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<div class="plan">
|
||||
<!-- src=" http://192.168.1.128:3001/zutai/?id=44368e72a2e594d14ebaf317f0f6ad00&&name=decodeURI(APP测试项目)&&flag=true&&wxqr=true#/" -->
|
||||
<!-- <iframe
|
||||
src="http://192.168.1.62:8088/zutai/?id=0944fe372e90daeefd040916a105ac8b&&name=测试组态编辑器&&preview=true#/preview"
|
||||
<bdMap
|
||||
v-show="store.state.showMap"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
></iframe> -->
|
||||
@pointClick="pointClick"
|
||||
></bdMap>
|
||||
|
||||
<!-- 添加加载事件监听 -->
|
||||
<iframe
|
||||
v-if="!store.state.showMap"
|
||||
:src="iframeSrc"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@@ -17,12 +18,18 @@
|
||||
id="iframeLeft"
|
||||
@load="onIframeLoad"
|
||||
></iframe>
|
||||
<el-button class="backButton" @click="backButton" size="small" :icon="Back"
|
||||
>返回</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onUnmounted } from "vue";
|
||||
import { getActive } from "@/api/manage_wx/index";
|
||||
|
||||
import { Back } from "@element-plus/icons-vue";
|
||||
import bdMap from "./bdMap.vue";
|
||||
import { useStore } from "vuex";
|
||||
const store = useStore();
|
||||
const props = defineProps<{
|
||||
project: { id: string; name: string } | null;
|
||||
}>();
|
||||
@@ -36,7 +43,8 @@ watch(
|
||||
if (newVal && newVal.id && newVal.name) {
|
||||
// window.location.origin
|
||||
iframeSrc.value =
|
||||
"http://192.168.1.179:4001" +
|
||||
window.location.origin +
|
||||
// "http://192.168.1.128:4001" +
|
||||
`/zutai/?id=${newVal.id}&&name=${encodeURIComponent(
|
||||
newVal.name
|
||||
)}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
|
||||
@@ -46,22 +54,37 @@ watch(
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
// 点击监测点传入 接线图id
|
||||
const pointClick = (row: any) => {
|
||||
setUrl(row.pictureId, row.pictureName);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 监听来自 eventStatistics 组件的消息
|
||||
window.addEventListener("message", handleMessage);
|
||||
|
||||
getActive({}).then((res: any) => {
|
||||
if (res.code == "A0000") {
|
||||
// window.location.origin
|
||||
iframeSrc.value =
|
||||
"http://192.168.1.179:4001" +
|
||||
`/zutai/?id=${res.data.id}&&name=${encodeURIComponent(
|
||||
res.data.name
|
||||
)}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
|
||||
setUrl(res.data.id, res.data.name);
|
||||
}
|
||||
});
|
||||
});
|
||||
const setUrl = (url: string, nam: string) => {
|
||||
iframeSrc.value =
|
||||
// window.location.origin +
|
||||
"http://192.168.1.179:4001" +
|
||||
`/zutai/?id=${url}&&name=${encodeURIComponent(
|
||||
nam
|
||||
)}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
|
||||
// const iframe = document.getElementById("iframeLeft");
|
||||
// if (iframe) {
|
||||
// // 监听 iframe 加载完成事件
|
||||
// iframe.addEventListener("load", function () {
|
||||
// // 通知父页面：我已加载完毕
|
||||
// store.dispatch("setStateKey", { key: "iframeLoad", value: true });
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
// 清理事件监听器
|
||||
@@ -70,6 +93,7 @@ onUnmounted(() => {
|
||||
|
||||
// iframe 加载完成回调 添加加载事件监听
|
||||
const onIframeLoad = () => {
|
||||
store.dispatch("setStateKey", { key: "iframeLoad", value: true });
|
||||
// console.log("iframe 加载完成");
|
||||
// 通知 securityDetail.vue 组件 iframe 已加载完成
|
||||
window.postMessage(
|
||||
@@ -107,7 +131,11 @@ const sendKeysToIframe = (keyList: string[]) => {
|
||||
); // 在生产环境中应该指定具体的域名而不是 '*'
|
||||
}
|
||||
};
|
||||
|
||||
// 返回地图
|
||||
const backButton = () => {
|
||||
window.removeEventListener("message", handleMessage);
|
||||
store.dispatch("setStateKey", { key: "showMap", value: true });
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.plan {
|
||||
@@ -115,4 +143,10 @@ const sendKeysToIframe = (keyList: string[]) => {
|
||||
height: 990px;
|
||||
padding: 5px;
|
||||
}
|
||||
.backButton {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
/>
|
||||
<IframeDia
|
||||
:event-list="eventListData as []"
|
||||
style="position: absolute; top: 0px; right: 0px; left: 0px"
|
||||
style="position: absolute; top: 0px; right: 0px; left: 0px;z-index: 10;"
|
||||
/>
|
||||
<!-- 图元颜色提示框 -->
|
||||
<div
|
||||
v-if="!showDetail"
|
||||
v-if="!store.state.showMap && !showDetail"
|
||||
style="
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
@@ -117,36 +117,42 @@
|
||||
"
|
||||
>
|
||||
<div style="display: flex">
|
||||
<img
|
||||
src="@/assets/icon/传输设备 (3).png"
|
||||
style="width: 20px; height: 20px"
|
||||
/>
|
||||
<span class="iconfont" style="color: #7ac1f9"></span>
|
||||
<div style="margin-left: 10px; font-size: 12px">监测点</div>
|
||||
</div>
|
||||
<div style="display: flex" v-if="currentFlag == 0">
|
||||
<img
|
||||
src="@/assets/icon/传输设备 (3).png"
|
||||
style="width: 20px; height: 20px"
|
||||
class="blink-basic"
|
||||
/>
|
||||
<span class="iconfont blink-basic" style="color: #375db4"
|
||||
></span
|
||||
>
|
||||
<div style="margin-left: 10px; font-size: 12px">
|
||||
暂降发生测点
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex" v-if="currentFlag == 1">
|
||||
<img
|
||||
src="@/assets/icon/传输设备 (4).png"
|
||||
style="width: 20px; height: 20px"
|
||||
class="blink-basic"
|
||||
/>
|
||||
<span class="iconfont blink-basic" style="color: #0936f4"
|
||||
></span
|
||||
>
|
||||
<div style="margin-left: 10px; font-size: 12px">背景测点</div>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<img
|
||||
src="@/assets/icon/传输设备 (2).png"
|
||||
style="width: 20px; height: 20px"
|
||||
class="blink-basic"
|
||||
/>
|
||||
<span
|
||||
v-if="currentFlag == 0"
|
||||
class="iconfont blink-basic"
|
||||
style="color: #03de6d"
|
||||
></span
|
||||
>
|
||||
<span
|
||||
v-if="currentFlag == 1"
|
||||
class="iconfont blink-basic"
|
||||
style="color: #cf552d"
|
||||
></span
|
||||
>
|
||||
<span
|
||||
v-if="currentFlag == 2"
|
||||
class="iconfont blink-basic"
|
||||
style="color: #f08a0a"
|
||||
></span
|
||||
>
|
||||
<div style="margin-left: 10px; font-size: 12px">
|
||||
<span v-if="currentFlag == 0">暂降溯源关联测点</span>
|
||||
<span v-if="currentFlag == 1">责任测点</span>
|
||||
@@ -154,15 +160,20 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex" v-if="currentFlag != 2">
|
||||
<img
|
||||
src="@/assets/icon/传输设备 (1).png"
|
||||
style="width: 20px; height: 20px"
|
||||
class="blink-basic"
|
||||
/>
|
||||
<span
|
||||
v-if="currentFlag == 0"
|
||||
class="iconfont blink-basic"
|
||||
style="color: #f9065b"
|
||||
></span
|
||||
>
|
||||
<span
|
||||
v-else
|
||||
class="iconfont blink-basic"
|
||||
style="color: #c708fe"
|
||||
></span
|
||||
>
|
||||
<div style="margin-left: 10px; font-size: 12px">
|
||||
{{
|
||||
currentFlag == 0 ? "暂降源测点" : "责任占比最高测点"
|
||||
}}
|
||||
{{ currentFlag == 0 ? "暂降源测点" : "责任占比最高测点" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -182,6 +193,7 @@
|
||||
@data-updated="handleDataUpdate"
|
||||
@flag-changed="handleFlagChange"
|
||||
@expand-detail="handleExpandDetail"
|
||||
@refresh-security-detail="refreshSecurityDetail"
|
||||
/>
|
||||
</dv-border-box-13>
|
||||
<!-- <dv-border-box-13 :color="color[0]">
|
||||
@@ -211,6 +223,9 @@ import datePicker from "@/components/datePicker/index.vue";
|
||||
import Management from "./components/manage/index.vue";
|
||||
import SecurityDetail from "./components/manage/securityDetail.vue";
|
||||
import IframeDia from "./components/manage/iframeDia.vue";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
const store = useStore();
|
||||
|
||||
// 传给iframe页面的参数
|
||||
const currentProject = ref<{ id: string; name: string } | null>(null);
|
||||
@@ -263,6 +278,13 @@ const handleDataUpdate = (data: string[]) => {
|
||||
eventListData.value = data;
|
||||
};
|
||||
|
||||
const refreshSecurityDetail = () => {
|
||||
// 调用 securityDetail 组件的刷新方法
|
||||
if (securityDetail.value) {
|
||||
securityDetail.value.refreshResponsibilityList();
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化并获取数据
|
||||
const initComponents = () => {
|
||||
if (eventStatistics.value) {
|
||||
@@ -409,7 +431,7 @@ const openDialog = () => {
|
||||
}
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 35px !important;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
/* 基本闪烁效果 */
|
||||
|
||||
@@ -43,7 +43,6 @@
|
||||
:center="center"
|
||||
:scroll-wheel-zoom="false"
|
||||
:double-click-zoom="false"
|
||||
|
||||
>
|
||||
<!-- 线-->
|
||||
<div v-if="zoom > 13">
|
||||
@@ -158,7 +157,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { ref, reactive, nextTick } from "vue";
|
||||
import { substationCount } from "@/api/statistics/index";
|
||||
import { useStore } from "vuex";
|
||||
// import { BmlMarkerClusterer } from "vue-baidu-map-3x";
|
||||
@@ -196,11 +195,16 @@ const handler = async ({ BMap, map }: any) => {
|
||||
|
||||
// 点击变电站\监测点
|
||||
const markerClick = (e: any) => {
|
||||
center.value.lng = e.lng;
|
||||
center.value.lat = e.lat + 0.01;
|
||||
zoom.value = 15;
|
||||
infoWindowPoint.value = e;
|
||||
infoWindowPoint.value.show = true;
|
||||
center.value.lng = 116.404367;
|
||||
center.value.lat = 39.915421;
|
||||
|
||||
setTimeout(() => {
|
||||
center.value.lng = e.lng;
|
||||
center.value.lat = e.lat + 0.01;
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
@@ -360,8 +364,10 @@ const setIcon = (e: string) => {
|
||||
moveenFlag.value = false;
|
||||
siteList.value.forEach((item: any) => {
|
||||
if (item.stationName == e) {
|
||||
center.value.lng = item.lng;
|
||||
center.value.lat = item.lat + 0.01;
|
||||
console.log(1);
|
||||
|
||||
// center.value.lng = item.lng;
|
||||
// center.value.lat = item.lat + 0.01;
|
||||
infoWindowPoint.value = item;
|
||||
infoWindowPoint.value.show = true;
|
||||
zoom.value = 15;
|
||||
|
||||
@@ -5,48 +5,38 @@
|
||||
<div class="scroll-content" ref="animatedRef"></div>
|
||||
</div>
|
||||
<!-- 紧急告警 -->
|
||||
<el-drawer
|
||||
<!-- <el-drawer
|
||||
class="urgent"
|
||||
modal-class="drawer"
|
||||
v-model="drawer"
|
||||
:draggable="true"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
title="紧急告警"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
> -->
|
||||
<el-dialog v-model="drawer" draggable :modal="false" :modal-penetrable="true" :close-on-click-modal="false"
|
||||
:close-on-press-escape="false" title="紧急告警" :before-close="handleClose">
|
||||
|
||||
<template #header>
|
||||
<div style="display: flex; ">
|
||||
<span>紧急告警</span>
|
||||
<Promotion style="width: 15px; margin-left: 10px; " />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<div :class="urgentList.length > 0 ? 'bg-red' : ''">
|
||||
<div class="drawer-but">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="totalProcessing(1)"
|
||||
:icon="Check"
|
||||
>确认</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="totalProcessing(2)"
|
||||
:icon="Check"
|
||||
>一键确认</el-button
|
||||
>
|
||||
<el-button size="small" type="primary" @click="totalProcessing(1)" :icon="Check">确认</el-button>
|
||||
<el-button size="small" type="primary" @click="totalProcessing(2)" :icon="Check">一键确认</el-button>
|
||||
</div>
|
||||
<div class="messageBox">
|
||||
<div
|
||||
class="mesModule"
|
||||
v-for="(item, index) in urgentList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="mesModule" v-for="(item, index) in urgentList" :key="index">
|
||||
<el-checkbox v-model="item.checked" value="" size="large" />
|
||||
<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)"
|
||||
>
|
||||
<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>
|
||||
<p class="mt5">
|
||||
{{ item.bdname }} {{ item.pointname }}发生{{
|
||||
@@ -56,31 +46,19 @@
|
||||
}}%,持续时间：{{ item.persisttime }}s;
|
||||
</p>
|
||||
<p class="mt5" style="display: flex; font-size: 14px">
|
||||
<span
|
||||
style="width: 75px"
|
||||
:style="{ color: item.checked ? '#0a73ff' : '#ffc107' }"
|
||||
>
|
||||
影响范围： </span
|
||||
><span
|
||||
style="flex: 1"
|
||||
:style="{ color: item.checked ? '#0a73ff' : '#ffc107' }"
|
||||
>{{ item.objName }}</span
|
||||
>
|
||||
<span style="width: 75px" :style="{ color: item.checked ? '#0a73ff' : '#ffc107' }">
|
||||
影响范围： </span><span style="flex: 1" :style="{ color: item.checked ? '#0a73ff' : '#ffc107' }">{{
|
||||
item.objName
|
||||
}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-dialog>
|
||||
<!-- </el-drawer> -->
|
||||
|
||||
<audio
|
||||
ref="audioRef"
|
||||
id="audioId"
|
||||
:src="mp3Src"
|
||||
loop
|
||||
controls
|
||||
hidden="true"
|
||||
></audio>
|
||||
<audio ref="audioRef" id="audioId" :src="mp3Src" loop controls hidden="true"></audio>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@@ -90,7 +68,7 @@ import { speak } from "@/utils/index";
|
||||
import { noDealEventList, lookEvent } from "@/api/statistics/index";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useStore } from "vuex";
|
||||
import { color } from "echarts";
|
||||
import { Promotion } from "@element-plus/icons-vue";
|
||||
|
||||
const store = useStore();
|
||||
const emit = defineEmits(["close", "handleCurrentChange"]);
|
||||
@@ -107,10 +85,7 @@ const handleSelectionChange = (val: any) => {
|
||||
const mp3Src: any = new URL(`@/assets/mp3/9578.mp3`, import.meta.url);
|
||||
const audioRef: any = ref(null);
|
||||
const updateData = (row: any) => {
|
||||
console.log(
|
||||
`🚀 ~ updateData ~ !row.dept.split(",").includes(store.state.deptId:`,
|
||||
!row.dept.split(",").includes(store.state.deptId)
|
||||
);
|
||||
|
||||
|
||||
if (!row.dept.split(",").includes(store.state.deptId)) return;
|
||||
broadcast.value.push(row);
|
||||
@@ -158,8 +133,7 @@ const speakBrowser = (item: any) => {
|
||||
// audioRef.value.pause() //暂停
|
||||
} else if (store.state.voiceType == 1) {
|
||||
speak(
|
||||
` ${item.timeid}${item.bdname}${
|
||||
item.pointname
|
||||
` ${item.timeid}${item.bdname}${item.pointname
|
||||
}发生${filteWavetype(item.wavetype)}事件,事件特征幅值${Math.floor(
|
||||
item.eventvalue * 100
|
||||
)}%,持续时间：${item.persisttime}秒`,
|
||||
@@ -272,7 +246,6 @@ const handleClose = (done: (cancel?: boolean) => void) => {
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
|
||||
setTimeout(() => {
|
||||
init();
|
||||
}, 1000);
|
||||
@@ -288,6 +261,7 @@ defineExpose({
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@use "@/assets/scss/index.scss";
|
||||
|
||||
.react-right {
|
||||
width: 500px !important;
|
||||
}
|
||||
@@ -304,53 +278,68 @@ defineExpose({
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
:deep(.el-drawer__header) {
|
||||
|
||||
:deep(.el-dialog__header) {
|
||||
margin-bottom: 0px;
|
||||
border-bottom: 1px solid #fff;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
background: #9f1700;
|
||||
}
|
||||
|
||||
:deep(.el-drawer__body) {
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.urgent) {
|
||||
width: 100% !important;
|
||||
height: 910px;
|
||||
}
|
||||
:deep(.drawer) {
|
||||
|
||||
:deep(.el-dialog) {
|
||||
// border: 1px solid #ff0000;
|
||||
|
||||
width: 25%;
|
||||
height: 920px;
|
||||
top: 9%;
|
||||
top: 0%;
|
||||
overflow: hidden;
|
||||
left: auto !important;
|
||||
.el-drawer {
|
||||
left: 37% !important;
|
||||
|
||||
.el-dialog {
|
||||
border: 1px solid #ff0000;
|
||||
height: 910px !important;
|
||||
}
|
||||
|
||||
.messageBox {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
height: 822px;
|
||||
height: 832px;
|
||||
padding: 0 10px;
|
||||
|
||||
div {
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #888; /* 滑块背景颜色 */
|
||||
border-radius: 5px; /* 滑块圆角 */
|
||||
background: #888;
|
||||
/* 滑块背景颜色 */
|
||||
border-radius: 5px;
|
||||
/* 滑块圆角 */
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #555; /* 悬停时滑块背景颜色 */
|
||||
background: #555;
|
||||
/* 悬停时滑块背景颜色 */
|
||||
}
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
.mesModule {
|
||||
margin-bottom: 10px;
|
||||
background-color: #00000085;
|
||||
@@ -358,6 +347,7 @@ defineExpose({
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
margin-left: 15px;
|
||||
}
|
||||
@@ -370,6 +360,7 @@ defineExpose({
|
||||
color: #ff0000;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #0a73ff;
|
||||
}
|
||||
|
||||
@@ -9,8 +9,15 @@
|
||||
style="width: 250px; margin-right: 10px" unlink-panels :clearable="false" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="部门集合">
|
||||
<el-select v-model="form.deptList" placeholder="请选择部门集合" style="width: 250px" size="small" multiple>
|
||||
<el-select v-model="form.deptList" placeholder="请选择部门集合" style="width: 250px" size="small" multiple
|
||||
collapse-tags collapse-tags-tooltip>
|
||||
<template #header>
|
||||
<el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
|
||||
全部
|
||||
</el-checkbox>
|
||||
</template>
|
||||
<el-option v-for="item in deptLists" :key="item.deptsIndex" :label="item.deptsname"
|
||||
:value="item.deptsIndex" />
|
||||
</el-select>
|
||||
@@ -30,12 +37,12 @@
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, inject, onMounted } from "vue";
|
||||
import { ref, watch, inject, onMounted } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Check, Close } from "@element-plus/icons-vue";
|
||||
import { getDept, exportForms } from "@/api/statistics/index";
|
||||
import type { CheckboxValueType } from 'element-plus'
|
||||
import { useStore } from "vuex";
|
||||
import { log } from "console";
|
||||
const store = useStore();
|
||||
const machineVisible = ref(false);
|
||||
const title = ref("报表导出");
|
||||
@@ -43,7 +50,8 @@ const timeValue = ref([]);
|
||||
const deptLists = ref();
|
||||
//form表单校验规则
|
||||
const emit = defineEmits(["flushed"]);
|
||||
|
||||
const checkAll = ref(false)
|
||||
const indeterminate = ref(false)
|
||||
const form = ref({
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
@@ -67,7 +75,41 @@ const init = () => {
|
||||
deptLists.value = res.data;
|
||||
});
|
||||
};
|
||||
// watch(form.value.deptList, (val) => {
|
||||
// if (val.length == 0) {
|
||||
// checkAll.value = false
|
||||
// indeterminate.value = false
|
||||
// } else if (val.length == deptLists.value.length) {
|
||||
// checkAll.value = true
|
||||
// indeterminate.value = false
|
||||
// } else {
|
||||
|
||||
// indeterminate.value = true
|
||||
// }
|
||||
// })
|
||||
watch(
|
||||
() => form.value.deptList, // 使用函数返回值的形式
|
||||
(val) => {
|
||||
if (val.length == 0) {
|
||||
checkAll.value = false
|
||||
indeterminate.value = false
|
||||
} else if (val.length == deptLists.value.length) {
|
||||
checkAll.value = true
|
||||
indeterminate.value = false
|
||||
} else {
|
||||
indeterminate.value = true
|
||||
}
|
||||
},
|
||||
{ deep: true } // 添加深度监听选项
|
||||
)
|
||||
const handleCheckAll = (val: CheckboxValueType) => {
|
||||
indeterminate.value = false
|
||||
if (val) {
|
||||
form.value.deptList = deptLists.value.map((_) => _.deptsIndex)
|
||||
} else {
|
||||
form.value.deptList = []
|
||||
}
|
||||
}
|
||||
const save = () => {
|
||||
if (!timeValue.value[0]) {
|
||||
ElMessage.warning("请选择时间！");
|
||||
@@ -160,4 +202,8 @@ defineExpose({ open });
|
||||
:deep(.el-form-item__label, ) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
<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">
|
||||
@@ -15,7 +19,8 @@
|
||||
<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]" />
|
||||
@@ -24,7 +29,11 @@
|
||||
<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>
|
||||
@@ -32,7 +41,10 @@
|
||||
<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>
|
||||
|
||||
@@ -49,8 +61,15 @@
|
||||
<el-dropdown-item @click="handleClick('2')"
|
||||
>模拟短信发送</el-dropdown-item
|
||||
> -->
|
||||
<el-dropdown-item @click="handleClick('3')">系统配置</el-dropdown-item>
|
||||
<el-dropdown-item @click="handleClick('4')">报表导出</el-dropdown-item>
|
||||
<el-dropdown-item @click="handleClick('3')"
|
||||
>系统配置</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="handleClick('4')"
|
||||
>报表导出</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="handleClick('5')"
|
||||
>台账导出</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
@@ -72,22 +91,36 @@
|
||||
<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>
|
||||
@@ -100,7 +133,10 @@
|
||||
<!-- <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" />
|
||||
@@ -110,10 +146,17 @@
|
||||
</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" />
|
||||
@@ -153,7 +196,7 @@ import socketClient from "@/utils/webSocketClient";
|
||||
import { useStore } from "vuex";
|
||||
import Config from "./components/config.vue";
|
||||
import ReportForms from "./components/reportForms.vue";
|
||||
|
||||
import { exportLineData } from "@/api/statistics/index";
|
||||
const store = useStore();
|
||||
const smsQueriesRef = ref(); // 短信查询组件引用
|
||||
const endpointStatisticsRef = ref(); // 终端在线统计组件引用
|
||||
@@ -255,6 +298,20 @@ const handleClick = (type: string) => {
|
||||
if (type === "4") {
|
||||
reportForms.value.open("报表导出");
|
||||
}
|
||||
if (type === "5") {
|
||||
exportLineData().then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
|
||||
});
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement("a"); // 创建a标签
|
||||
link.href = url;
|
||||
link.download = "台账.xlsx"; // 设置下载的文件名
|
||||
document.body.appendChild(link);
|
||||
link.click(); //执行下载
|
||||
document.body.removeChild(link);
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
|
||||
@@ -41,6 +41,7 @@ export default ({ command, mode }) => {
|
||||
base: "./",
|
||||
server: {
|
||||
host: "127.0.0.1",
|
||||
allowedHosts: true,
|
||||
port: 4000, // 设置服务启动端口号
|
||||
// port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
|
||||
|
||||
@@ -53,11 +54,10 @@ export default ({ command, mode }) => {
|
||||
proxy: {
|
||||
"/api": {
|
||||
// target: "http://192.168.1.63/api/",
|
||||
// target: "http://192.168.1.133:4000/api/",
|
||||
// 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.63/api', //cdf
|
||||
// target: 'http://192.168.1.130:18093', //cdf
|
||||
// target: 'http://192.168.1.127:18093', //cdf
|
||||
target: "http://192.168.1.103:19001", //cdf
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
rewrite: (path) => path.replace(/^\/api/, ""),
|
||||
|
||||
Reference in New Issue
Block a user