updata
1 parent 774f276 commit c614a16a48f0b1ac824eb5484cda458de4349c04
@鲁yixuan 鲁yixuan authored on 24 Oct
Showing 2 changed files
View
86
src/views/DialogTabs/component/RQ_FengXianJianCe.vue
</div>
<div class="SearchLabel">预警类型:</div>
<div class="SearchSel">
<el-select v-model="AllData.value2" placeholder="Select" style="width: 100%">
<el-option
v-for="item in AllData.options2"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in AllData.options2" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="SearchLabel">
累计次数: <span class="SearchLabelValue">{{ AllData.CS }}</span>
</div>
</template>
 
<script setup name="RQ_FengXianJianCe">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
import { earlyWarningInfoPage } from "@/api/ranqi.js";
import bus from "@/bus";
import dialogTabsStore from "@/store/modules/dialogTabs";
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import { earlyWarningInfoPage } from '@/api/ranqi.js';
import bus from '@/bus';
import dialogTabsStore from '@/store/modules/dialogTabs';
 
const useDialogTabs = dialogTabsStore();
const AllData = reactive({
dateTime: "",
dateTime: '',
options: [
{
value: "2021",
label: "2021年",
},
{
value: "2022",
label: "2022年",
},
{
value: "2023",
label: "2023年",
},
{
value: "2024",
label: "2024年",
value: '2021',
label: '2021年',
},
{
value: '2022',
label: '2022年',
},
{
value: '2023',
label: '2023年',
},
{
value: '2024',
label: '2024年',
},
],
value2: "0",
value2: '0',
options2: [
{
value: "0",
label: "全部",
},
{
value: "1",
label: "甲烷浓度",
},
{
value: "2",
label: "压力",
},
{
value: "3",
label: "温度",
value: '0',
label: '全部',
},
{
value: '1',
label: '甲烷浓度',
},
{
value: '3',
label: '温度',
},
{
value: '2',
label: '水位',
},
],
CS: 4,
loading: false,
pageNum: 1,
pageSize: 10,
},
});
const getList = (item) => {
const getList = item => {
// 获取数据
earlyWarningInfoPage({ warningType: item }).then((res) => {
earlyWarningInfoPage({ warningType: item }).then(res => {
AllData.DataList = res.data;
AllData.total = res.total;
AllData.CS = res.total;
// console.log(res, 'shuju');
// });
});
 
onBeforeUnmount(() => {
bus.off("getDataListFxjc");
bus.off('getDataListFxjc');
});
</script>
 
<style lang="scss" scoped>
View
959
src/views/oneMap/components/ZHRQ.vue
<template>
<div id="ZHRQ">
<PublicHead />
 
<div
:class="[
'LeftBox',
'animate__animated',
showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
]"
>
<div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
<div class="ComBox LeftBox1_1">
<div class="Box_header" style="cursor: pointer" @click="ShowSiSetu(true)">
管道风险评估
</div>
<div class="Box_header" style="cursor: pointer" @click="ShowSiSetu(true)">管道风险评估</div>
<div class="Box_Body">
<div class="TJListBox">
<div class="TJList TJList_RQ" @click="TuChengClick(0)">
<img
class="TJListImg"
src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png"
alt=""
/>
<img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png" alt="" />
<span class="TJListName">燃气管道</span>
<span class="TJListValue">4549km</span>
</div>
<div class="TJList TJList_GZ">
<img
class="TJListImg"
src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png"
alt=""
/>
<img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png" alt="" />
<span class="TJListName">需改造</span>
<span class="TJListValue">1922km</span>
</div>
</div>
<span class="tableHeaderList tableList4">操作</span>
</div>
<div class="tableBody">
<div class="tableBodyList" v-for="item in AllData.FXJCData">
<span class="tableBodyList_span1" @click="FengXianClick(item)">{{
item.zb
}}</span>
<span class="tableBodyList_span1" @click="FengXianClick(item)">{{ item.zb }}</span>
<span class="tableBodyList_span2" @click="FengXianClick(item)"
>{{ item.sz }}
<el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
<el-icon v-else color="#f54444" size="14">
<Bottom />
</el-icon>
</span>
<span
class="tableBodyList_span3"
:class="item.zt == 0 ? 'YJClass' : ''"
>{{ item.zt == 0 ? "预警" : "正常" }}</span
>
<span class="tableBodyList_span3" :class="item.zt == 0 ? 'YJClass' : ''">{{
item.zt == 0 ? '预警' : '正常'
}}</span>
<span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
</div>
</div>
<div class="tableFoot">更新时间:2024-09-27 10:00</div>
<div class="tableFoot">更新时间:2024-10:25 10:00</div>
</div>
</div>
</div>
<div class="ComBox LeftBox1_3">
<div id="YJEchartsBox"></div>
</div>
</div>
</div>
<div
:class="[
'RightBox',
'animate__animated',
showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
]"
>
<div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
<div class="ComBox RightBox1_1">
<div class="Box_header">辅助决策</div>
<div class="Box_Body">
<div class="JCListBox" v-for="item in AllData.JCData" @click="fzjcBoxClick(item)" >
<div class="JCListBox" v-for="item in AllData.JCData" @click="fzjcBoxClick(item)">
<div class="JCListBox_List">
<span class="JCListBox_List_label">风险区域:</span>
<span class="JCListBox_List_value">{{ item.wranLocation }}</span>
</div>
<span class="JCListBox_List_label">问题研判:</span>
<span class="JCListBox_List_value color_red">{{ item.assessment }}</span>
</div>
<div class="JCListBox_List JCListBox_List_BTN">
<el-button
style="background: #03b6a0; color: white; border: none"
size="small"
@click="GongDanPaiFa(item)"
<el-button style="background: #03b6a0; color: white; border: none" size="small" @click="GongDanPaiFa(item)"
>工单派发</el-button
>
<el-button
style="background: #03b6a0; color: white; border: none"
size="small"
@click="XianChangLianXian(item)"
<el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
>现场联线</el-button
>
</div>
</div>
<div class="ComBox RightBox1_2">
<div class="Box_header">预警处置</div>
<div class="Box_Body">
<div class="FK_headerBox">
<div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
<span class="FK_headerBox_list_colorBox1"></span> 未处理
</div>
<div class="FK_headerBox_list" @click="dealOrNoDeal(2)">
<span class="FK_headerBox_list_colorBox2"></span> 已处理
</div>
<div class="FK_headerBox_list" @click="dealOrNoDeal(1)"><span class="FK_headerBox_list_colorBox1"></span> 未处理</div>
<div class="FK_headerBox_list" @click="dealOrNoDeal(2)"><span class="FK_headerBox_list_colorBox2"></span> 已处理</div>
</div>
<div class="FK_bodyBox">
<div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
<span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{
item.name
}}</span>
<span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{ item.name }}</span>
<div class="FK_BigBox">
<div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
<div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
</div>
</div>
</Vue3SeamlessScroll>
</div> -->
 
<div
class="IssueWarning"
:class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
@click="WarningClick"
>
发布预警
</div>
<div class="IssueWarning" :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']" @click="WarningClick">发布预警</div>
</div>
</template>
 
<script setup name="ZHRQ">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from "vue";
 
import PublicHead from "./PublicHead";
 
import moment from "moment";
import * as echarts from "echarts";
import bus from "@/bus";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import sheBeiLost from "@/assets/sheBeiLost.json";
import xiaXian from "@/assets/xiaXian.json";
import yiBian from "@/assets/yiBian.json";
import zaWuDuiFang from "@/assets/zaWuDuiFang.json";
import rq_QiTa from "@/assets/rq_QiTa.json";
import no_sheBeiLost from "@/assets/no_sheBeiLost.json";
import no_xiaXian from "@/assets/no_xiaXian.json";
import no_yiBian from "@/assets/no_yiBian.json";
import no_zaWuDuiFang from "@/assets/no_zaWuDuiFang.json";
import no_rq_QiTa from "@/assets/no_rq_QiTa.json";
import yanAnRQoverindex from "@/assets/yanAnRQoverindex.json";
import yanAnWarring from "@/assets/yanAnWarring.json";
 
import dialogTabsStore from "@/store/modules/dialogTabs";
import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
import PublicHead from './PublicHead';
 
import moment from 'moment';
import * as echarts from 'echarts';
import bus from '@/bus';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import sheBeiLost from '@/assets/sheBeiLost.json';
import xiaXian from '@/assets/xiaXian.json';
import yiBian from '@/assets/yiBian.json';
import zaWuDuiFang from '@/assets/zaWuDuiFang.json';
import rq_QiTa from '@/assets/rq_QiTa.json';
import no_sheBeiLost from '@/assets/no_sheBeiLost.json';
import no_xiaXian from '@/assets/no_xiaXian.json';
import no_yiBian from '@/assets/no_yiBian.json';
import no_zaWuDuiFang from '@/assets/no_zaWuDuiFang.json';
import no_rq_QiTa from '@/assets/no_rq_QiTa.json';
import yanAnRQoverindex from '@/assets/yanAnRQoverindex.json';
import yanAnWarring from '@/assets/yanAnWarring.json';
 
import dialogTabsStore from '@/store/modules/dialogTabs';
// 辅助决策
import { commonWarningList } from "@/api/RQWarning";
import { selectBoxBySiteNo } from "@/api/system/tanchuang";
import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
import { commonWarningList } from '@/api/RQWarning';
import { selectBoxBySiteNo } from '@/api/system/tanchuang';
import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
const useDialogTabs = dialogTabsStore();
const { proxy } = getCurrentInstance();
const { module_type } = proxy.useDict("module_type");
console.log("🚀 ~ module_type:", module_type);
const { module_type } = proxy.useDict('module_type');
console.log('🚀 ~ module_type:', module_type);
 
const AllData = reactive({
xunChaStatic: null,
showTipsData: {},
xunChaLayers: [
"alreadyDeal_DF",
"alreadyDeal_DS",
"alreadyDeal_XX",
"alreadyDeal_YB",
"alreadyDeal_QT",
"noDeal_DF",
"noDeal_DS",
"noDeall_XX",
"noDeal_YB",
"noDeal_QT",
'alreadyDeal_DF',
'alreadyDeal_DS',
'alreadyDeal_XX',
'alreadyDeal_YB',
'alreadyDeal_QT',
'noDeal_DF',
'noDeal_DS',
'noDeall_XX',
'noDeal_YB',
'noDeal_QT',
],
ChangeData: [
{
name: "延安中学",
name: '延安中学',
id: 1,
siteNo:'RQ202400001',
position:[109.4774986436632,36.60497748480903],
},
{
name: "延安大学附属医院",
siteNo: 'RQ202400001',
position: [109.4774986436632, 36.60497748480903],
},
{
name: '延安大学附属医院',
id: 2,
siteNo:'RQ202400002',
position:[109.48304674487184,36.59982338278728],
siteNo: 'RQ202400002',
position: [109.48304674487184, 36.59982338278728],
},
],
TableChangeIndex: 1,
TableChangeNo: 'RQ202400001',
TableChangeName: '延安中学',
TableChangePosition: [109.4774986436632,36.60497748480903],
TableChangePosition: [109.4774986436632, 36.60497748480903],
// 风险监测
FXJCData: [
{
zb: "甲烷浓度",
sz: "3%",
zb: '甲烷浓度',
sz: '0%',
szzt: false,
zt: 1, //0预警 1 正常
// value: "JWND",
value: '1',
},
{
zb: '温度',
sz: '17C°',
szzt: true,
zt: 0, //0预警 1 正常
// value: "JWND",
value: "1",
},
{
zb: "压力",
sz: "5MPa",
zt: 1, //0预警 1 正常
// value: "WD",
value: '3',
},
{
zb: '水位',
sz: '0',
szzt: false,
zt: 1, //0预警 1 正常
// value: "YL",
value: "2",
},
{
zb: "温度",
sz: "25C°",
szzt: true,
zt: 1, //0预警 1 正常
// value: "WD",
value: "3",
value: '2',
},
],
YJChangeData: [
{
name: "综合",
name: '综合',
id: 1,
},
{
name: "压力",
name: '压力',
id: 2,
},
{
name: "温度",
name: '温度',
id: 3,
},
],
YJChangeIndex: 1,
//辅助决策
JCData: [
{
qy: "宝塔区凤凰山街道二道街",
tz: "压力监测异常波动",
qy: '宝塔区凤凰山街道二道街',
tz: '压力监测异常波动',
sj: 5,
yp: "设施故障",
value: "001", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
},
{
qy: "宝塔区凤凰山街道二道街",
tz: "燃气管道压力过大",
yp: '设施故障',
value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
},
{
qy: '宝塔区凤凰山街道二道街',
tz: '燃气管道压力过大',
sj: 5,
yp: "燃气爆管风险",
value: "002",
},
{
qy: "宝塔区凤凰山街道二道街",
tz: "高峰期流量持续降低",
yp: '燃气爆管风险',
value: '002',
},
{
qy: '宝塔区凤凰山街道二道街',
tz: '高峰期流量持续降低',
sj: 4,
yp: "燃气泄漏风险",
value: "003",
yp: '燃气泄漏风险',
value: '003',
},
],
// 巡查反馈
XCFKData: [
{
name: "堆放杂物",
name: '堆放杂物',
num1: 20,
num2: 80,
},
{
name: "设备丢失",
name: '设备丢失',
num1: 12,
num2: 88,
},
{
name: "下陷",
name: '下陷',
num1: 32,
num2: 68,
},
{
name: "异变",
name: '异变',
num1: 30,
num2: 70,
},
{
name: "其他",
name: '其他',
num1: 20,
num2: 80,
},
],
// 顶部表格数据
TopTableData: [
{
sj: "2024-09-26 10:00:29",
mx: "燃气常规检查发现泄漏",
dd: "宝塔区凤凰山街道二道街",
sj: '2024-09-26 10:00:29',
mx: '燃气常规检查发现泄漏',
dd: '宝塔区凤凰山街道二道街',
zt: 0, //0未处理 1已处理
dw: "延安市燃气总公司",
dw: '延安市燃气总公司',
value: null,
},
{
sj: "2024-09-27 16:10:248",
mx: "燃气常规检查发现泄漏",
dd: "宝塔区凤凰山街道二道街",
sj: '2024-09-27 16:10:248',
mx: '燃气常规检查发现泄漏',
dd: '宝塔区凤凰山街道二道街',
zt: 0, //0未处理 1已处理
dw: "延安市燃气总公司",
dw: '延安市燃气总公司',
value: null,
},
{
sj: "2024-09-26 10:00:29",
mx: "燃气常规检查发现泄漏",
dd: "宝塔区凤凰山街道二道街",
sj: '2024-09-26 10:00:29',
mx: '燃气常规检查发现泄漏',
dd: '宝塔区凤凰山街道二道街',
zt: 0, //0未处理 1已处理
dw: "延安市燃气总公司",
dw: '延安市燃气总公司',
value: null,
},
{
sj: "2024-09-27 16:10:248",
mx: "燃气常规检查发现泄漏",
dd: "宝塔区凤凰山街道二道街",
sj: '2024-09-27 16:10:248',
mx: '燃气常规检查发现泄漏',
dd: '宝塔区凤凰山街道二道街',
zt: 0, //0未处理 1已处理
dw: "延安市燃气总公司",
dw: '延安市燃气总公司',
value: null,
},
],
// 底部表格数据
bottomTableData: [
{
zhzx: "预警发布",
dt: "启动预警并通知成员单位",
sj: "10-20 08:30",
zlzt: "预警下发给城管局各单位,燃气供应处",
},
{
zhzx: "预警启动",
dt: "起草燃气安全预警应急行动",
sj: "10-20 07:00",
zlzt: "起草了预警通知",
zhzx: '预警发布',
dt: '启动预警并通知成员单位',
sj: '10-20 08:30',
zlzt: '预警下发给城管局各单位,燃气供应处',
},
{
zhzx: '预警启动',
dt: '起草燃气安全预警应急行动',
sj: '10-20 07:00',
zlzt: '起草了预警通知',
},
],
timer: null,
});
},
});
 
// 初始化预警统计的Echarts
const initEcharts = (id) => {
const initEcharts = id => {
AllData.YJChangeIndex = id;
let Data1 = [];
let Data2 = [];
if (AllData.YJChangeIndex == 1) {
}
if (!!myChart.value) {
myChart.value.dispose();
}
myChart.value = echarts.init(document.getElementById("YJEchartsBox"));
myChart.value.off("click");
myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
myChart.value.off('click');
myChart.value.setOption({
color: ["#18A7F2", "#1AF7AA"],
color: ['#18A7F2', '#1AF7AA'],
tooltip: {
trigger: "axis",
trigger: 'axis',
},
grid: {
top: "30%",
left: "3%",
right: "4%",
bottom: "3%",
top: '30%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ["预警次数", "持续时长"],
data: ['预警次数', '持续时长'],
textStyle: {
color: "#fffd", // 图例文字颜色
color: '#fffd', // 图例文字颜色
},
x: "40",
y: "10",
x: '40',
y: '10',
},
xAxis: [
{
type: "category",
data: ["今日", "09/27", "09/26", "09/25", "09/24", "09/23", "09/22"],
type: 'category',
data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
axisPointer: {
type: "shadow",
type: 'shadow',
},
textStyle: {
color: "#EBFEFF",
color: '#EBFEFF',
},
axisLine: {
lineStyle: {
color: "#EBFEFF",
color: '#EBFEFF',
},
},
// boundaryGap: false,
},
],
yAxis: [
{
type: "value",
name: "预警次数",
type: 'value',
name: '预警次数',
min: 0,
max: 12,
interval: 2,
axisLabel: {
formatter: "{value}",
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: "#AAC1CF",
color: '#AAC1CF',
},
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ["#184E5A"],
color: ['#184E5A'],
},
},
},
{
type: "value",
name: "持续时长",
type: 'value',
name: '持续时长',
min: 0,
max: 30,
interval: 5,
axisLabel: {
formatter: "{value}",
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: "#AAC1CF",
color: '#AAC1CF',
},
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ["#184E5A"],
color: ['#184E5A'],
},
},
},
],
series: [
{
name: "预警次数",
type: "bar",
barWidth: "10px",
name: '预警次数',
type: 'bar',
barWidth: '10px',
showBackground: true,
tooltip: {
valueFormatter: function (value) {
return value + " 次";
return value + ' 次';
},
},
itemStyle: {
// borderRadius: 10, // 统一设置四个角的圆角大小
},
data: Data1,
},
{
name: "持续时长",
type: "line",
name: '持续时长',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + "min";
return value + 'min';
},
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#1AF7AA",
color: '#1AF7AA',
},
{
offset: 1,
color: "#1AF7AA00",
color: '#1AF7AA00',
},
]),
},
 
data: Data2,
},
],
});
myChart.value.on("click", (param) => {
myChart.value.on('click', param => {
console.log(param);
let data = {
title: "风险监测",
comIDs: ["RQ_FengXianJianCe"],
title: '风险监测',
comIDs: ['RQ_FengXianJianCe'],
};
bus.emit("publicDialog", data);
bus.emit('publicDialog', data);
let a = {
value: "全部",
endTime: "2024-10-05",
value: '全部',
endTime: '2024-10-05',
};
setTimeout(() => {
bus.emit("getDataListFxjc", a);
bus.emit('getDataListFxjc', a);
}, 500);
});
 
animateChart();
AllData.timer = setInterval(() => {
i++;
if (i == length) i = 0;
myChart.value.dispatchAction({
type: "showTip",
type: 'showTip',
seriesIndex: 0,
dataIndex: i,
});
}, 2000);
const initEcharts2 = () => {
if (!!myChart2.value) {
myChart2.value.dispose();
}
myChart2.value = echarts.init(document.getElementById("Echarts2Box"));
myChart2.value.off("click");
myChart2.value = echarts.init(document.getElementById('Echarts2Box'));
myChart2.value.off('click');
myChart2.value.setOption({
tooltip: {
trigger: "axis",
trigger: 'axis',
axisPointer: {
type: "shadow",
type: 'shadow',
},
},
grid: {
left: "5%",
top: "5%",
right: "5%",
bottom: "5%",
left: '5%',
top: '5%',
right: '5%',
bottom: '5%',
containLabel: true,
},
xAxis: {
type: "category",
type: 'category',
triggerEvent: true,
axisLine: {
show: false,
},
axisLabel: {
color: "#FFFFFF",
fontSize: "14",
color: '#FFFFFF',
fontSize: '14',
// interval: 0,
// rotate: rotate//文字旋转角度
},
axisTick: {
// show: false,
alignWithLabel: true,
lineStyle: {
color: "#0C4F81",
type: "solid",
color: '#0C4F81',
type: 'solid',
},
},
// data: xAxisData,
data: ["市政老化", "庭院老化", "立管老化", "其他"],
data: ['市政老化', '庭院老化', '立管老化', '其他'],
},
yAxis: {
type: "value",
type: 'value',
nameTextStyle: {
color: "#4F88BD",
color: '#4F88BD',
padding: [0, 25, -5, 0],
fontSize: 12,
fontFamily: "Microsoft YaHei",
fontFamily: 'Microsoft YaHei',
},
axisLine: {
show: true,
lineStyle: {
color: "#0C4F81",
color: '#0C4F81',
},
},
axisLabel: {
color: "#4F88BD",
fontSize: "12",
formatter: "{value}",
color: '#4F88BD',
fontSize: '12',
formatter: '{value}',
},
splitLine: {
lineStyle: {
type: "dotted",
color: "#0C4F81",
type: 'dotted',
color: '#0C4F81',
},
},
axisTick: {
show: false,
},
series: [
{
z: 2,
type: "pictorialBar",
symbolPosition: "end",
type: 'pictorialBar',
symbolPosition: 'end',
data: [410, 420, 520, 520],
symbol: "diamond",
symbolOffset: ["0", "-40%"], //盖子的位置
symbol: 'diamond',
symbolOffset: ['0', '-40%'], //盖子的位置
symbolSize: [15, 13], //盖子的大小
itemStyle: {
color: {
type: "linear",
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(1, 224, 238, 1 )" },
{ offset: 1, color: "rgba(1, 224, 238, 1)" },
{ offset: 0, color: 'rgba(1, 224, 238, 1 )' },
{ offset: 1, color: 'rgba(1, 224, 238, 1)' },
],
}, //盖子的颜色
},
tooltip: {
},
},
{
z: 1,
type: "bar",
type: 'bar',
barWidth: 15,
barGap: "50%",
barGap: '50%',
data: [410, 420, 520, 520],
itemStyle: {
color: {
type: "linear",
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(1, 224, 238, 0.8)" },
{ offset: 0.5, color: "rgba(1, 224, 238, 0.5)" },
{ offset: 0.5, color: "rgba(1, 224, 238, 0.1)" },
{ offset: 1, color: "rgba(1, 224, 238, 0.8)" },
{ offset: 0, color: 'rgba(1, 224, 238, 0.8)' },
{ offset: 0.5, color: 'rgba(1, 224, 238, 0.5)' },
{ offset: 0.5, color: 'rgba(1, 224, 238, 0.1)' },
{ offset: 1, color: 'rgba(1, 224, 238, 0.8)' },
],
},
},
},
],
});
myChart2.value.on("click", (param) => {
myChart2.value.on('click', param => {
console.log(param);
TuChengClick(param.dataIndex - 1);
});
};
}
return `width:${widthNum}%`;
};
// 工单派发
const GongDanPaiFa = (item) => {
const GongDanPaiFa = item => {
console.log(item);
let data = {
title: item.wranLocation,
comIDs: ["gdpf"],
comIDs: ['gdpf'],
getSiteId: item.id,
};
bus.emit("publicDialog", data);
bus.emit('publicDialog', data);
};
// // 风险
// const FengXianClick = (item) => {
// console.log(item);
// };
// bus.emit("publicDialog", data);
// };
// 风险监测派发
const PaiFa = (item) => {
const PaiFa = item => {
console.log(item);
// let data = {
// title: "智慧外呼",
// comIDs: ["RQ_ZhiHuiWaiHu"],
 
useDialogTabs.addPosition(AllData.TableChangePosition); // 添加全景位置
useDialogTabs.addRQ(item);
let data = {
title: AllData.TableChangeName + " " + item.zb + " 风险监测",
title: AllData.TableChangeName + ' ' + item.zb + ' 风险监测',
comIDs: [],
SiteNo: AllData.TableChangeNo,
RefName: "RQ_ZhiHuiWaiHu",
RefName: 'RQ_ZhiHuiWaiHu',
};
 
getTabsList(AllData.TableChangeNo).then((res) => {
getTabsList(AllData.TableChangeNo).then(res => {
data.comIDs = res;
bus.emit("publicDialog", data);
bus.emit('publicDialog', data);
});
};
//巡查反馈处理、未处理
const dealOrNoDeal = (item) => {
const dealOrNoDeal = item => {
AllData.xunChaStatic = item;
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
bus.emit("removeMapDatas", ["warning_monitor"]);
bus.emit('removeMapDatas', ['warning_monitor']);
if (item == 1) {
let removedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
let selectedLayer = AllData.xunChaLayers.filter((layer) =>
layer.includes("alreadyDeal")
);
bus.emit("removeMapDatas", AllData.xunChaLayers);
bus.emit("setGeoJSON", { json: zaWuDuiFang, key: "alreadyDeal_DF" });
bus.emit("setGeoJSON", { json: sheBeiLost, key: "alreadyDeal_DS" });
bus.emit("setGeoJSON", { json: xiaXian, key: "alreadyDeal_XX" });
bus.emit("setGeoJSON", { json: yiBian, key: "alreadyDeal_YB" });
bus.emit("setGeoJSON", { json: rq_QiTa, key: "alreadyDeal_QT" });
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
bus.emit('removeMapDatas', AllData.xunChaLayers);
bus.emit('setGeoJSON', { json: zaWuDuiFang, key: 'alreadyDeal_DF' });
bus.emit('setGeoJSON', { json: sheBeiLost, key: 'alreadyDeal_DS' });
bus.emit('setGeoJSON', { json: xiaXian, key: 'alreadyDeal_XX' });
bus.emit('setGeoJSON', { json: yiBian, key: 'alreadyDeal_YB' });
bus.emit('setGeoJSON', { json: rq_QiTa, key: 'alreadyDeal_QT' });
selectedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: true });
});
} else {
let removedLayer = AllData.xunChaLayers.filter((layer) =>
layer.includes("alreadyDeal")
);
let selectedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
bus.emit("removeMapDatas", AllData.xunChaLayers);
bus.emit("setGeoJSON", { json: no_zaWuDuiFang, key: "onDeal_DF" });
bus.emit("setGeoJSON", { json: no_sheBeiLost, key: "onDeal_DS" });
bus.emit("setGeoJSON", { json: no_xiaXian, key: "onDeal_XX" });
bus.emit("setGeoJSON", { json: no_yiBian, key: "onDeal_YB" });
bus.emit("setGeoJSON", { json: no_rq_QiTa, key: "onDeal_QT" });
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
bus.emit('removeMapDatas', AllData.xunChaLayers);
bus.emit('setGeoJSON', { json: no_zaWuDuiFang, key: 'onDeal_DF' });
bus.emit('setGeoJSON', { json: no_sheBeiLost, key: 'onDeal_DS' });
bus.emit('setGeoJSON', { json: no_xiaXian, key: 'onDeal_XX' });
bus.emit('setGeoJSON', { json: no_yiBian, key: 'onDeal_YB' });
bus.emit('setGeoJSON', { json: no_rq_QiTa, key: 'onDeal_QT' });
selectedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: true });
});
}
};
// 巡查反馈
const XunChaFanKui = (item) => {
const XunChaFanKui = item => {
let removedLayer = [];
let selectedLayer = [];
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
switch (item.name) {
case "堆放杂物":
removedLayer = AllData.xunChaLayers.filter(
(layer) => layer != "alreadyDeal_DF" && layer != "noDeal_DF"
);
selectedLayer = AllData.xunChaLayers.filter(
(layer) => layer == "alreadyDeal_DF" || layer == "noDeal_DF"
);
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
case '堆放杂物':
removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DF' && layer != 'noDeal_DF');
selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DF' || layer == 'noDeal_DF');
selectedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: true });
});
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
removedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: false });
});
break;
case "设备丢失":
removedLayer = AllData.xunChaLayers.filter(
(layer) => layer != "alreadyDeal_DS" && layer != "noDeal_DS"
);
selectedLayer = AllData.xunChaLayers.filter(
(layer) => layer == "alreadyDeal_DS" || layer == "noDeal_DS"
);
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
case '设备丢失':
removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DS' && layer != 'noDeal_DS');
selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DS' || layer == 'noDeal_DS');
selectedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: true });
});
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
removedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: false });
});
break;
case "下陷":
removedLayer = AllData.xunChaLayers.filter(
(layer) => layer != "alreadyDeal_XX" && layer != "noDeal_XX"
);
selectedLayer = AllData.xunChaLayers.filter(
(layer) => layer == "alreadyDeal_XX" || layer == "noDeal_XX"
);
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
case '下陷':
removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_XX' && layer != 'noDeal_XX');
selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_XX' || layer == 'noDeal_XX');
selectedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: true });
});
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
removedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: false });
});
break;
case "异变":
removedLayer = AllData.xunChaLayers.filter(
(layer) => layer != "alreadyDeal_YB" && layer != "noDeal_YB"
);
selectedLayer = AllData.xunChaLayers.filter(
(layer) => layer == "alreadyDeal_YB" || layer == "noDeal_YB"
);
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
case '异变':
removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_YB' && layer != 'noDeal_YB');
selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_YB' || layer == 'noDeal_YB');
selectedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: true });
});
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
removedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: false });
});
break;
case "其他":
removedLayer = AllData.xunChaLayers.filter(
(layer) => layer != "alreadyDeal_QT" && layer != "noDeal_QT"
);
selectedLayer = AllData.xunChaLayers.filter(
(layer) => layer == "alreadyDeal_QT" || layer == "noDeal_QT"
);
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
case '其他':
removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_QT' && layer != 'noDeal_QT');
selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_QT' || layer == 'noDeal_QT');
selectedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: true });
});
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
removedLayer.forEach(layer => {
bus.emit('setLayerVisible', { layername: layer, isCheck: false });
});
break;
}
};
// 风险评估
const TuChengClick = (item) => {
const TuChengClick = item => {
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
switch (item) {
case 0:
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
break;
case 1:
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
break;
case 2:
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
 
break;
case 3:
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: true });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: true });
bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
break;
case 4:
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: true });
bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: true });
break;
}
};
 
// 辅助决策点击
const fzjcBoxClick = (item) => {
const fzjcBoxClick = item => {
item.zb = '压力';
item.value = '2';
console.log("🚀 ~ fzjcBoxClick ~ item.location.split(','):", item.location.split(',').map(item => parseFloat(item)))
useDialogTabs.addPosition(item.location.split(',').map(item => parseFloat(item))) // 添加全景位置
useDialogTabs.addRQ(item) // 添加燃气数据
console.log(
"🚀 ~ fzjcBoxClick ~ item.location.split(','):",
item.location.split(',').map(item => parseFloat(item))
);
useDialogTabs.addPosition(item.location.split(',').map(item => parseFloat(item))); // 添加全景位置
useDialogTabs.addRQ(item); // 添加燃气数据
let data = {
title: item.wranLocation +' '+ item.zb + " 风险监测",
comIDs: [],
title: item.wranLocation + ' ' + item.zb + ' 风险监测',
comIDs: [],
SiteNo: item.siteNo,
RefName:"RQ_FengXianJianCe",
RefName: 'RQ_FengXianJianCe',
};
 
getTabsList(item.siteNo).then(res => {
data.comIDs = res;
bus.emit('publicDialog', data);
});
};
 
 
// 风险
const FengXianClick = (item) => {
const FengXianClick = item => {
// let data = {
// title: item.zb + " 风险监测",
// comIDs: ["RQ_FengXianJianCe"],
// };
// AllData.TableChangeNo
useDialogTabs.addPosition(AllData.TableChangePosition); // 添加全景位置
useDialogTabs.addRQ(item); // 添加燃气数据
let data = {
title: AllData.TableChangeName + " " + item.zb + " 风险监测",
title: AllData.TableChangeName + ' ' + item.zb + ' 风险监测',
comIDs: [],
SiteNo: AllData.TableChangeNo,
RefName: "RQ_FengXianJianCe",
RefName: 'RQ_FengXianJianCe',
};
 
getTabsList(AllData.TableChangeNo).then((res) => {
getTabsList(AllData.TableChangeNo).then(res => {
data.comIDs = res;
bus.emit("publicDialog", data);
bus.emit('publicDialog', data);
});
 
// setTimeout(() => {
// bus.emit("getDataListFxjc", item);
// }, 200);
};
 
// 现场连线
const XianChangLianXian = (item) => {
bus.emit("OpenRY");
const XianChangLianXian = item => {
bus.emit('OpenRY');
};
 
// 发布预警
const WarningClick = (item) => {
const WarningClick = item => {
let data = {
title: "发布预警",
comIDs: ["RQ_Warning"],
title: '发布预警',
comIDs: ['RQ_Warning'],
};
bus.emit("publicDialog", data);
bus.emit('publicDialog', data);
 
setTimeout(() => {
bus.emit("RQ_PrimaryType", 1);
bus.emit('RQ_PrimaryType', 1);
});
};
 
watch(
{ immediate: true }
);
//燃气超标
const showIndexOver = () => {
bus.emit("removeMapDatas", AllData.xunChaLayers);
let key = "warning_monitor";
bus.emit("getGeojsonByType", {
bus.emit('removeMapDatas', AllData.xunChaLayers);
let key = 'warning_monitor';
bus.emit('getGeojsonByType', {
type: key,
callback: (geojson) => {
if (!!!geojson.features.length)
bus.emit("setGeoJSON", { json: yanAnRQoverindex, key: "warning_monitor" });
bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
callback: geojson => {
if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnRQoverindex, key: 'warning_monitor' });
bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
},
});
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
});
};
//燃气告警
const showIndexWarning = () => {
bus.emit("removeMapDatas", AllData.xunChaLayers);
let key = "warning_monitor";
bus.emit("getGeojsonByType", {
bus.emit('removeMapDatas', AllData.xunChaLayers);
let key = 'warning_monitor';
bus.emit('getGeojsonByType', {
type: key,
callback: (geojson) => {
if (!!!geojson.features.length)
bus.emit("setGeoJSON", { json: yanAnWarring, key: "warning_monitor" });
bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
callback: geojson => {
if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnWarring, key: 'warning_monitor' });
bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
},
});
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
 
// 辅助决策
const getCommonWarningList = async () => {
try {
const res = await commonWarningList({ moduleType: "Gas" });
const res = await commonWarningList({ moduleType: 'Gas' });
JCData.value = res.data;
// console.log('🚀 ~ getCommonWarningList ~ res:', res);
} catch (error) {
console.log("🚀 ~ getCommonWarningList ~ error:", error);
console.log('🚀 ~ getCommonWarningList ~ error:', error);
}
};
 
const fxjsChange = (item) => {
const fxjsChange = item => {
// TableChangeIndex: 1,
// TableChangeNo: 'RQ20240001',
AllData.TableChangeIndex = item.id;
AllData.TableChangeNo = item.siteNo;
AllData.TableChangePosition = item.position;
};
 
// 获取站点弹窗 tab列表
const getTabsList = async (siteNo) => {
const getTabsList = async siteNo => {
try {
const res = await selectBoxBySiteNo(siteNo);
const tabsList = res.data.boxList.map((item) => item.boxId);
const tabsList = res.data.boxList.map(item => item.boxId);
return tabsList;
} catch (error) {
console.log("🚀 ~ getTabsList ~ error:", error);
console.log('🚀 ~ getTabsList ~ error:', error);
}
};
// 展示四色图
const ShowSiSetu = (bol) => {
bus.emit("SetLayerShow", ["燃气风险评估"]);
const ShowSiSetu = bol => {
bus.emit('SetLayerShow', ['燃气风险评估']);
// bus.emit("SiSeTuBol", true);
};
onMounted(() => {
let initeRQTimer = setInterval(() => {
if (!newfiberMapbox) return;
if (!newfiberMapbox.map.getLayer("rq_pipeline_info")) return;
if (!newfiberMapbox.map.getLayer("sx_ya_smx_rq_point")) return;
if (!newfiberMapbox.map.getLayer('rq_pipeline_info')) return;
if (!newfiberMapbox.map.getLayer('sx_ya_smx_rq_point')) return;
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
});
//告警点事件
let warningPoint = newfiberMapbox
.getLayers()
.filter((feature) => feature.newfiberId == "warning_monitor")[0];
let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
if (warningPoint) {
warningPoint.on("click", (e) => {
warningPoint.on('click', e => {
let popupData = e.feature.properties;
 
debugger;
console.log("popupData---", "告警---------", popupData);
console.log('popupData---', '告警---------', popupData);
FengXianClick({
zb: "甲烷浓度",
sz: "3%",
zb: '甲烷浓度',
sz: '3%',
szzt: true,
zt: 0, //0预警 1 正常
value: "JWND",
value: 'JWND',
});
});
}
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
bus.emit("setLayerVisible", { layername: "sx_ya_smx_rq_line_sz", isCheck: true });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
bus.emit("setLayerVisible", { layername: "sx_ya_smx_rq_line_zg", isCheck: true });
bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_sz', isCheck: true });
bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_zg', isCheck: true });
clearInterval(initeRQTimer);
}, 100);
initEcharts(1);
initEcharts2();
getCommonWarningList();
});
onBeforeUnmount(() => {
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
bus.emit("removeMapDatas", AllData.xunChaLayers);
bus.emit("removeMapDatas", ["warning_monitor"]);
bus.emit("setLayerVisible", { layername: "warning_monitor", isCheck: false });
bus.emit("closeCesiumPopup");
bus.emit("SetLayerShow", ["蓝色地图"]);
mapBoxVectorLayer.removeByIds(["clickPoint"]);
bus.emit("closeCesiumPopup");
if (!!newfiberMapbox.getLayerByName("rqLine")) {
newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
bus.emit('removeMapDatas', AllData.xunChaLayers);
bus.emit('removeMapDatas', ['warning_monitor']);
bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
bus.emit('closeCesiumPopup');
bus.emit('SetLayerShow', ['蓝色地图']);
mapBoxVectorLayer.removeByIds(['clickPoint']);
bus.emit('closeCesiumPopup');
if (!!newfiberMapbox.getLayerByName('rqLine')) {
newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
}
});
</script>
 
<style lang="scss" scoped>
@import "@/assets/styles/transition_oneMap.scss";
@import '@/assets/styles/transition_oneMap.scss';
#ZHRQ {
.warningPrompt {
position: absolute;
top: 120px;
height: calc(100% - 98px);
position: absolute;
left: 10px;
top: 70px;
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
padding: 10px;
.TJList2 {
height: 42px;
width: calc(50% - 9px);
display: flex;
background: url("@/assets/images/Sponge_screen/RQ/RQ_FX.png") no-repeat center;
background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
background-size: 100% 100%;
cursor: pointer;
 
.TJList2Name {
height: calc(100% - 98px);
position: absolute;
right: 10px;
top: 70px;
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
padding: 10px;
height: 122px;
position: absolute;
left: 520px;
top: 110px;
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
box-shadow: inset 0 0 5px 5px #47eef38a;
height: 122px;
position: absolute;
left: 510px;
bottom: 180px;
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
box-shadow: inset 0 0 5px 5px #47eef38a;
box-sizing: border-box;
.Box_header {
width: 100%;
height: 43px;
background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
center;
background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
background-size: cover;
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;