- <template>
- <div id="ZHRQ">
- <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
- <div class="ComBox LeftBox1_1">
- <div class="Box_header">管道风险评估</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="" />
- <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="" />
- <span class="TJListName">需改造</span>
- <span class="TJListValue">1922km</span>
- </div>
- </div>
- <div class="RQ_EchartsBox">
- <div class="ClickDiv1" @click="TuChengClick(1)"></div>
- <div class="ClickDiv2" @click="TuChengClick(2)"></div>
- <div class="ClickDiv3" @click="TuChengClick(3)"></div>
- <div class="ClickDiv4" @click="TuChengClick(4)"></div>
- </div>
- </div>
- </div>
- <div class="ComBox LeftBox1_2">
- <div class="Box_header">风险监测</div>
- <div class="Box_Body">
- <div class="TJListBox">
- <div class="TJList2" @click="showIndexOver()">
- <span class="TJList2Name">指标超标</span>
- <span class="TJList2Value">10</span>
- </div>
- <div class="TJList2" @click="showIndexWarning()">
- <span class="TJList2Name">预警站点数</span>
- <span class="TJList2Value">1</span>
- </div>
- </div>
- <div class="TableChange">
- <div
- class="TableChangeList"
- :class="AllData.TableChangeIndex == item.id ? 'TableCheck' : ''"
- v-for="item in AllData.ChangeData"
- @click="AllData.TableChangeIndex = item.id"
- >
- {{ item.name }}
- </div>
- </div>
- <!-- 弹性盒子 -->
- <div class="TableBox">
- <div class="tableHeader">
- <span class="tableHeaderList tableList1">指标</span>
- <span class="tableHeaderList tableList2">数值</span>
- <span class="tableHeaderList tableList3">状态</span>
- <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_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_span4" @click="PaiFa(item)">派发</span>
- </div>
- </div>
- <div class="tableFoot">更新时间:2024-09-27 10:00</div>
- </div>
- </div>
- </div>
- <div class="ComBox LeftBox1_3">
- <div class="Box_header">预警统计</div>
- <div class="Box_Body">
- <div class="TableChange2">
- <div
- class="TableChangeList2"
- :class="AllData.YJChangeIndex == item.id ? 'TableCheck2' : ''"
- v-for="item in AllData.YJChangeData"
- @click="initEcharts(item.id)"
- >
- {{ item.name }}
- </div>
- </div>
- <div id="YJEchartsBox"></div>
- </div>
- </div>
- </div>
- <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">
- <div class="JCListBox_List">
- <span class="JCListBox_List_label">风险区域:</span>
- <span class="JCListBox_List_value">{{ item.qy }}</span>
- </div>
- <div class="JCListBox_List">
- <span class="JCListBox_List_label">风险特征:</span>
- <span class="JCListBox_List_value">{{ item.tz }}</span>
- </div>
- <div class="JCListBox_List">
- <span class="JCListBox_List_label">历史事件:</span>
- <span class="JCListBox_List_value">{{ item.sj }}</span>
- </div>
- <div class="JCListBox_List">
- <span class="JCListBox_List_label">问题研判:</span>
- <span class="JCListBox_List_value color_red">{{ item.yp }}</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
- >
- <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
- >现场联线</el-button
- >
- </div>
- </div>
- </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>
- <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>
- <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>
- </div>
- </div>
- </div>
- </div>
- <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
- <div class="TopTableHeader">
- <span class="TopTableListSpan TopTableListSpan1">时间</span>
- <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
- <span class="TopTableListSpan TopTableListSpan3">地点</span>
- <span class="TopTableListSpan TopTableListSpan4">状态</span>
- <span class="TopTableListSpan TopTableListSpan5">责任单位</span>
- <span class="TopTableListSpan TopTableListSpan6">督办</span>
- </div>
- <!-- <div class="TopTableBody"> -->
- <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
- <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
- <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
- <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
- <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
- <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
- <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
- <span class="TopTableListSpan TopTableListSpan6">
- <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
- <img
- class="TopTableListSpanImg"
- src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
- alt=""
- @click="XianChangLianXian(item)"
- />
- </span>
- </div>
- </Vue3SeamlessScroll>
- <!-- </div> -->
- </div>
- <div :class="['bottomBox', 'animate__animated', showPanel ? 'animate__bounceOutDown' : 'animate__fadeInUpBig']">
- <div class="TopTableHeader">
- <span class="TopTableListSpan TopTableListSpan1">指挥中心</span>
- <span class="TopTableListSpan TopTableListSpan2">动态</span>
- <span class="TopTableListSpan TopTableListSpan3">时间</span>
- <span class="TopTableListSpan TopTableListSpan4">指令状态</span>
- </div>
- <Vue3SeamlessScroll :list="AllData.bottomTableData" :singleHeight="34" :hover="true" class="TopTableBody">
- <div class="TopTableBody_list" v-for="item in AllData.bottomTableData">
- <span class="TopTableListSpan TopTableListSpan1">{{ item.zhzx }}</span>
- <span class="TopTableListSpan TopTableListSpan2">{{ item.dt }}</span>
- <span class="TopTableListSpan TopTableListSpan3">{{ item.sj }}</span>
- <span class="TopTableListSpan TopTableListSpan4">{{ item.zlzt }}</span>
- </div>
- </Vue3SeamlessScroll>
- </div>
-
- <div class="IssueWarning" @click="WarningClick">发布预警</div>
- </div>
- </template>
-
- <script setup name="ZHRQ">
- import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';
-
- 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';
-
- const AllData = reactive({
- xunChaStatic: null,
- xunChaLayers: [
- 'alreadyDeal_DF',
- 'alreadyDeal_DS',
- 'alreadyDeal_XX',
- 'alreadyDeal_YB',
- 'alreadyDeal_QT',
- 'noDeal_DF',
- 'noDeal_DS',
- 'noDeall_XX',
- 'noDeal_YB',
- 'noDeal_QT',
- ],
- ChangeData: [
- {
- name: '枣园',
- id: 1,
- },
- {
- name: '杨家湾',
- id: 2,
- },
- {
- name: '丰富川',
- id: 3,
- },
- ],
- TableChangeIndex: 1,
- // 风险监测
- FXJCData: [
- {
- zb: '甲烷浓度',
- sz: '3%',
- szzt: true,
- zt: 0, //0预警 1 正常
- value: 'JWND',
- },
- {
- zb: '压力',
- sz: '5MPa',
- szzt: false,
- zt: 1, //0预警 1 正常
- value: 'YL',
- },
- {
- zb: '温度',
- sz: '25C°',
- szzt: true,
- zt: 1, //0预警 1 正常
- value: 'WD',
- },
- ],
- YJChangeData: [
- {
- name: '综合',
- id: 1,
- },
- {
- name: '压力',
- id: 2,
- },
- {
- name: '温度',
- id: 3,
- },
- ],
- YJChangeIndex: 1,
- //辅助决策
- JCData: [
- {
- qy: '宝塔区凤凰山街道二道街',
- tz: '压力监测异常波动',
- sj: 5,
- yp: '设施故障',
- value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
- },
- {
- qy: '宝塔区凤凰山街道二道街',
- tz: '燃气管道压力过大',
- sj: 5,
- yp: '燃气爆管风险',
- value: '002',
- },
- {
- qy: '宝塔区凤凰山街道二道街',
- tz: '高峰期流量持续降低',
- sj: 4,
- yp: '燃气泄漏风险',
- value: '003',
- },
- ],
- // 巡查反馈
- XCFKData: [
- {
- name: '堆放杂物',
- num1: 20,
- num2: 80,
- },
- {
- name: '设备丢失',
- num1: 12,
- num2: 88,
- },
- {
- name: '下陷',
- num1: 32,
- num2: 68,
- },
- {
- name: '异变',
- num1: 30,
- num2: 70,
- },
- {
- name: '其他',
- num1: 20,
- num2: 80,
- },
- ],
- // 顶部表格数据
- TopTableData: [
- {
- sj: '2024-09-26 10:00:29',
- mx: '燃气常规检查发现泄漏',
- dd: '宝塔区凤凰山街道二道街',
- zt: 0, //0未处理 1已处理
- dw: '延安市燃气总公司',
- value: null,
- },
- {
- sj: '2024-09-27 16:10:248',
- mx: '燃气常规检查发现泄漏',
- dd: '宝塔区凤凰山街道二道街',
- zt: 0, //0未处理 1已处理
- dw: '延安市燃气总公司',
- value: null,
- },
- {
- sj: '2024-09-26 10:00:29',
- mx: '燃气常规检查发现泄漏',
- dd: '宝塔区凤凰山街道二道街',
- zt: 0, //0未处理 1已处理
- dw: '延安市燃气总公司',
- value: null,
- },
- {
- sj: '2024-09-27 16:10:248',
- mx: '燃气常规检查发现泄漏',
- dd: '宝塔区凤凰山街道二道街',
- zt: 0, //0未处理 1已处理
- dw: '延安市燃气总公司',
- value: null,
- },
- ],
- // 底部表格数据
- bottomTableData: [
- {
- zhzx: '预警发布',
- dt: '启动预警并通知成员单位',
- sj: '10-20 08:30',
- zlzt: '预警下发给城管局各单位,燃气供应处',
- },
- {
- zhzx: '预警启动',
- dt: '起草燃气安全预警应急行动',
- sj: '10-20 07:00',
- zlzt: '起草了预警通知',
- },
- ],
- timer: null,
- });
- // 预警统计echarts实例
- const myChart = shallowRef(null);
- //面板展开收起
- const showPanel = ref(true);
- // 面板内容展开收起控制
- const props = defineProps({
- showPanel: {
- type: Boolean,
- },
- });
- // 初始化预警统计的Echarts
- const initEcharts = id => {
- AllData.YJChangeIndex = id;
- let Data1 = [];
- let Data2 = [];
- if (AllData.YJChangeIndex == 1) {
- Data1 = [6, 2, 1, 5, 7, 6, 3];
- Data2 = [16, 7, 8, 12, 16, 13, 12];
- } else if (AllData.YJChangeIndex == 2) {
- Data1 = [2, 3, 8, 3, 2, 1, 4];
- Data2 = [7, 16, 13, 16, 12, 8, 12];
- } else {
- Data1 = [6, 4, 3, 5, 8, 3, 8];
- Data2 = [8, 12, 16, 13, 16, 7, 12];
- }
- if (!!AllData.timer) {
- clearTimeout(AllData.timer);
- }
- if (!!myChart.value) {
- myChart.value.dispose();
- }
- myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
- myChart.value.off('click');
- myChart.value.setOption({
- color: ['#18A7F2', '#1AF7AA'],
- tooltip: {
- trigger: 'axis',
- },
- grid: {
- top: '30%',
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true,
- },
- legend: {
- data: ['预警次数', '持续时长'],
- textStyle: {
- color: '#fffd', // 图例文字颜色
- },
- x: '40',
- y: '10',
- },
- xAxis: [
- {
- type: 'category',
- data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
- axisPointer: {
- type: 'shadow',
- },
- textStyle: {
- color: '#EBFEFF',
- },
- axisLine: {
- lineStyle: {
- color: '#EBFEFF',
- },
- },
- // boundaryGap: false,
- },
- ],
- yAxis: [
- {
- type: 'value',
- name: '预警次数',
- min: 0,
- max: 12,
- interval: 2,
- axisLabel: {
- formatter: '{value}',
- },
- axisLine: {
- lineStyle: {
- color: '#AAC1CF',
- },
- },
- splitLine: {
- lineStyle: {
- // 使用深浅的间隔色
- color: ['#184E5A'],
- },
- },
- },
- {
- type: 'value',
- name: '持续时长',
- min: 0,
- max: 30,
- interval: 5,
- axisLabel: {
- formatter: '{value}',
- },
- axisLine: {
- lineStyle: {
- color: '#AAC1CF',
- },
- },
- splitLine: {
- lineStyle: {
- // 使用深浅的间隔色
- color: ['#184E5A'],
- },
- },
- },
- ],
- series: [
- {
- name: '预警次数',
- type: 'bar',
- barWidth: '10px',
- showBackground: true,
- tooltip: {
- valueFormatter: function (value) {
- return value + ' 次';
- },
- },
- itemStyle: {
- // borderRadius: 10, // 统一设置四个角的圆角大小
- borderRadius: [10, 10, 0, 0], //(顺时针左上,右上,右下,左下)
- },
- data: Data1,
- },
- {
- name: '持续时长',
- type: 'line',
- yAxisIndex: 1,
- tooltip: {
- valueFormatter: function (value) {
- return value + 'min';
- },
- },
- areaStyle: {
- opacity: 0.8,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#1AF7AA',
- },
- {
- offset: 1,
- color: '#1AF7AA00',
- },
- ]),
- },
-
- data: Data2,
- },
- ],
- });
- myChart.value.on('click', param => {
- console.log(param);
- let data = {
- title: '风险监测',
- comIDs: ['RQ_FengXianJianCe'],
- };
- bus.emit('publicDialog', data);
- let a = {
- value: '全部',
- endTime: '2024-10-05',
- };
- setTimeout(() => {
- bus.emit('getDataListFxjc', a);
- }, 500);
- });
-
- animateChart();
- };
-
- const animateChart = () => {
- let length = 7;
- let i = 0;
- AllData.timer = setInterval(() => {
- i++;
- if (i == length) i = 0;
- myChart.value.dispatchAction({
- type: 'showTip',
- seriesIndex: 0,
- dataIndex: i,
- });
- }, 2000);
- };
- // 动态计算盒子的宽度
- const getWidth = (item, num) => {
- let widthNum = 0;
- if (num == 1) {
- widthNum = (item.num1 / (item.num1 + item.num2)) * 100;
- } else {
- widthNum = (item.num2 / (item.num1 + item.num2)) * 100;
- }
- return `width:${widthNum}%`;
- };
- // 工单派发
- const GongDanPaiFa = item => {
- console.log(item);
- let data = {
- title: item.qy,
- comIDs: ['gdpf'],
- getSiteId: item.value,
- };
- bus.emit('publicDialog', data);
- };
- // // 风险
- // const FengXianClick = (item) => {
- // console.log(item);
- // let data = {
- // title: item.zb + " 风险监测",
- // comIDs: ["RQ_FengXianJianCe"],
- // };
- // bus.emit("publicDialog", data);
- // };
- // 风险监测派发
- const PaiFa = item => {
- console.log(item);
- let data = {
- title: '智慧外呼',
- comIDs: ['RQ_ZhiHuiWaiHu'],
- getSiteId: item.value,
- };
- bus.emit('publicDialog', data);
- };
- //巡查反馈处理、未处理
- const dealOrNoDeal = item => {
- AllData.xunChaStatic = item;
- newfiberMapbox.map.easeTo({
- center: [109.488, 36.596],
- zoom: 12,
- pitch: 55,
- });
- 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 });
- });
- } 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 });
- });
- }
- };
- // 巡查反馈
- 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 });
- });
- 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 });
- });
- 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 });
- });
- 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 });
- });
- 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 });
- });
- removedLayer.forEach(layer => {
- bus.emit('setLayerVisible', { layername: layer, isCheck: false });
- });
- break;
- }
- };
- // 风险评估
- 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
- 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 });
- 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 });
-
- 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 });
- 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 });
- break;
- }
- };
-
- // 风险
- const FengXianClick = item => {
- let data = {
- title: item.zb + ' 风险监测',
- comIDs: ['RQ_FengXianJianCe'],
- };
- bus.emit('publicDialog', data);
- // 传给组件数据
-
- setTimeout(() => {
- bus.emit('getDataListFxjc', item);
- }, 500);
- };
-
- // 现场连线
- const XianChangLianXian = item => {
- bus.emit('OpenRY');
- };
-
- // 发布预警
- const WarningClick = item => {
- let data = {
- title: '发布预警',
- comIDs: ['RQ_Warning'],
- };
- bus.emit('publicDialog', data);
- };
-
- watch(
- () => props.showPanel,
- () => {
- showPanel.value = props.showPanel;
- },
- { immediate: true }
- );
- //燃气超标
- const showIndexOver = () => {
- 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 });
- },
- });
- newfiberMapbox.map.easeTo({
- center: [109.488, 36.596],
- zoom: 13,
- });
- };
- //燃气告警
- const showIndexWarning = () => {
- 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 });
- },
- });
- newfiberMapbox.map.easeTo({
- center: [109.488, 36.596],
- zoom: 13,
- });
- };
- 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;
- newfiberMapbox.map.easeTo({
- center: [109.488, 36.596],
- zoom: 12,
- });
- //告警点事件
- let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
- if (warningPoint) {
- warningPoint.on('click', e => {
- let popupData = e.feature.properties;
-
- console.log('popupData---', '告警---------', popupData);
- });
- }
- 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);
- });
- 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', ['蓝色地图']);
- if (!!newfiberMapbox.getLayerByName('rqLine')) {
- newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
- }
- });
- </script>
-
- <style lang="scss" scoped>
- @import '@/assets/styles/transition_oneMap.scss';
- #ZHRQ {
- .LeftBox {
- width: 450px;
- 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%);
- border-radius: 6px;
- border: 1px solid #47eef3;
- box-sizing: border-box;
- padding: 10px;
- box-shadow: inset 0 0 5px 5px #47eef38a;
-
- .LeftBox1_1 {
- height: 365px;
-
- .TJListBox {
- height: 42px;
- margin-top: 10px;
- width: 100%;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: space-between;
- align-items: center;
-
- .TJList {
- height: 42px;
- width: calc(50% - 9px);
- display: flex;
- .TJListImg {
- width: 22px;
- height: 22px;
- margin: 9px;
- }
- .TJListName {
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #f4f9ff;
- width: 65px;
- height: 40px;
- line-height: 40px;
- }
-
- .TJListValue {
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 20px;
- width: calc(100% - 110px);
- height: 40px;
- line-height: 40px;
- text-align: right;
- }
- }
-
- .TJList_RQ {
- background: rgba(7, 54, 102, 0.3);
- border-radius: 4px;
- border: 1px solid #15d2fd;
- box-shadow: inset 0 0 10px #15d2fdb0; /* 水平偏移|垂直偏移|模糊半径|颜色 */
- cursor: pointer;
-
- .TJListValue {
- color: #12f9ff;
- }
- }
- .TJList_GZ {
- background: rgba(164, 74, 8, 0.3);
- border-radius: 4px;
- border: 1px solid #ffd97f;
- box-shadow: inset 0 0 10px #ffd97fb0; /* 水平偏移|垂直偏移|模糊半径|颜色 */
- .TJListValue {
- color: #ffd97f;
- }
- }
- }
- .RQ_EchartsBox {
- width: 100%;
- height: calc(100% - 72px);
- margin-top: 10px;
- background: url('@/assets/images/Sponge_screen/RQ/Ech.png') no-repeat center;
- position: relative;
-
- .ClickDiv1 {
- width: 80px;
- height: 250px;
- // background: #ff000063;
- position: absolute;
- bottom: 0px;
- left: 60px;
- cursor: pointer;
- }
- .ClickDiv2 {
- width: 80px;
- height: 250px;
- // background: #ff000063;
- position: absolute;
- bottom: 0px;
- left: 160px;
- cursor: pointer;
- }
- .ClickDiv3 {
- width: 80px;
- height: 250px;
- // background: #ff000063;
- position: absolute;
- bottom: 0px;
- left: 255px;
- cursor: pointer;
- }
- .ClickDiv4 {
- width: 80px;
- height: 250px;
- // background: #ff000063;
- position: absolute;
- bottom: 0px;
- left: 340px;
- cursor: pointer;
- }
- }
- }
- .LeftBox1_2 {
- height: calc(100% - 365px - 275px - 10px);
- margin-bottom: 10px;
- // 风险监测
- .TJListBox {
- height: 42px;
- margin-top: 10px;
- width: 100%;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: space-between;
- align-items: center;
- .TJList2 {
- height: 42px;
- width: calc(50% - 9px);
- display: flex;
- background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
- background-size: 100% 100%;
- cursor: pointer;
-
- .TJList2Name {
- width: 50%;
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #f4f9ff;
- height: 40px;
- line-height: 40px;
- text-align: left;
- box-sizing: border-box;
- padding-left: 20px;
- }
- .TJList2Value {
- width: 50%;
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 20px;
- color: #12f9ff;
- height: 40px;
- line-height: 40px;
- text-align: center;
- }
- }
- }
- .TableChange {
- height: 42px;
- width: 100%;
- box-sizing: border-box;
- padding: 10px 0px;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-end;
- align-items: center;
-
- .TableChangeList {
- width: 60px;
- height: 22px;
- background: #00344f;
- border-radius: 2px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- font-size: 14px;
- color: #c1d3d4;
- text-align: center;
- line-height: 20px;
- cursor: pointer;
- }
-
- .TableCheck {
- background: #00344f;
- border-radius: 2px;
- border: 1px solid #1cf5fc;
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 12px;
- color: #ebfeff;
- background: #1cf4fc22;
- }
- }
-
- .TableBox {
- width: 100%;
- height: calc(100% - 94px);
-
- .tableHeader {
- width: 100%;
- height: 34px;
- background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
- border-radius: 2px;
- border: 1px solid #74dde1;
- display: flex;
-
- .tableHeaderList {
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- height: 34px;
- line-height: 34px;
- text-align: center;
- }
- .tableList1 {
- width: 20%;
- }
- .tableList2 {
- width: 30%;
- }
- .tableList3 {
- width: 30%;
- }
- .tableList4 {
- width: 20%;
- }
- }
-
- .tableBody {
- width: 100%;
- height: calc(100% - 68px);
- overflow: auto;
-
- .tableBodyList {
- height: 34px;
- line-height: 34px;
- width: 100%;
- display: flex;
- /* 选择偶数行 */
- &:nth-child(even) {
- background: linear-gradient(0deg, #008599 0%, #08596d 100%);
- }
-
- .tableBodyList_span1 {
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- height: 34px;
- line-height: 34px;
- text-align: center;
- width: 20%;
- cursor: pointer;
- }
- .tableBodyList_span2 {
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- height: 34px;
- line-height: 34px;
- text-align: center;
- width: 30%;
- cursor: pointer;
- }
- .tableBodyList_span3 {
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- height: 34px;
- line-height: 34px;
- text-align: center;
- width: 30%;
- }
- .YJClass {
- color: #ffe243;
- }
- .tableBodyList_span4 {
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- height: 34px;
- line-height: 34px;
- text-align: center;
- width: 20%;
- cursor: pointer;
- }
- }
- }
-
- .tableFoot {
- width: 100%;
- height: 34px;
- background: linear-gradient(0deg, #008599b7 0%, #08596d91 100%);
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ebfeff;
- line-height: 34px;
- text-align: center;
- }
- }
- }
- .LeftBox1_3 {
- height: 275px;
-
- .TableChange2 {
- height: 42px;
- width: 200px;
- box-sizing: border-box;
- padding: 10px 0px;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-end;
- align-items: center;
- position: absolute;
- top: 0px;
- right: 0px;
- z-index: 999;
-
- .TableChangeList2 {
- width: 60px;
- height: 22px;
- background: #00344f;
- border-radius: 2px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- font-size: 14px;
- color: #c1d3d4;
- text-align: center;
- line-height: 20px;
- cursor: pointer;
- }
-
- .TableCheck2 {
- background: #00344f;
- border-radius: 2px;
- border: 1px solid #1cf5fc;
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 12px;
- color: #ebfeff;
- background: #1cf4fc22;
- }
- }
- #YJEchartsBox {
- width: 100%;
- height: 100%;
- }
- }
- }
- .RightBox {
- width: 450px;
- 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%);
- border-radius: 6px;
- border: 1px solid #47eef3;
- box-sizing: border-box;
- padding: 10px;
- box-shadow: inset 0 0 5px 5px #47eef38a;
-
- .RightBox1_1 {
- height: calc(100% - 298px);
- margin-bottom: 10px;
- box-sizing: border-box;
- // padding: 0 10px;
-
- .JCListBox {
- margin-top: 10px;
- width: 100%;
- height: 196px;
- background: linear-gradient(0deg, #008599 0%, #08596d 100%);
- border-radius: 4px;
- overflow: hidden;
-
- .JCListBox_List {
- width: 100%;
- height: 28px;
- margin-top: 10px;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: space-evenly;
- align-items: center;
-
- .JCListBox_List_label {
- display: inline-block;
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #c1d3d4;
- height: 28px;
- line-height: 28px;
- text-align: right;
- width: 70px;
- }
- .JCListBox_List_value {
- display: inline-block;
- border: 1px solid #1cf5fc;
- width: 290px;
- height: 28px;
- line-height: 28px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- text-align: center;
- }
- }
- .JCListBox_List_BTN {
- justify-content: center;
- align-items: center;
- }
- }
- }
- .RightBox1_2 {
- height: 288px;
- .FK_headerBox {
- width: 100%;
- height: 45px;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- .FK_headerBox_list {
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #ebfeff;
- width: 100px;
- text-align: center;
-
- .FK_headerBox_list_colorBox1 {
- display: inline-block;
- width: 10px;
- height: 10px;
- background: #ee5777;
- }
- .FK_headerBox_list_colorBox2 {
- display: inline-block;
- width: 10px;
- height: 10px;
- background: #00ffbe;
- }
- }
- }
- .FK_bodyBox {
- width: 100%;
- height: 200px;
- overflow: auto;
- box-sizing: border-box;
- padding: 0 30px;
-
- .FK_bodyBox_list {
- width: 100%;
- height: 20px;
- margin-bottom: 20px;
- display: flex;
-
- .FK_bodyBox_list_label {
- display: block;
- font-family: Source Han Sans CN;
- font-weight: 500;
- font-size: 14px;
- color: #ffffff;
- width: 80px;
- cursor: pointer;
- }
- .FK_BigBox {
- display: block;
- width: calc(100% - 80px);
- height: 20px;
-
- .FK_CenBox1 {
- display: inline-block;
- height: 20px;
- background: linear-gradient(-90deg, #f35f7f 0%, #c21439 100%);
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #ffffff;
- text-align: right;
- line-height: 20px;
- box-sizing: border-box;
- padding: 0 10px;
- }
- .FK_CenBox2 {
- display: inline-block;
- height: 20px;
- background: linear-gradient(90deg, #20d9aa 0%, #0882a0 100%);
- font-weight: bold;
- font-size: 14px;
- color: #ffffff;
- text-align: right;
- line-height: 20px;
- box-sizing: border-box;
- padding: 0 10px;
- }
- }
- }
- }
- }
- }
- .TopBox {
- width: calc(100% - 1040px);
- 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%);
- border-radius: 6px;
- border: 1px solid #47eef3;
- box-sizing: border-box;
- box-shadow: inset 0 0 5px 5px #47eef38a;
- padding: 10px;
- .TopTableHeader {
- width: 100%;
- height: 34px;
- background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
- border: 1px solid #74dde1;
- display: flex;
- }
-
- .TopTableBody {
- width: 100%;
- height: calc(100% - 34px);
- overflow: auto;
- // display: flex;
- // flex-direction: column;
- // flex-wrap: nowrap;
-
- .TopTableBody_list {
- display: inline-block;
- width: 100%;
- height: 34px;
- /* 选择偶数行 */
- &:nth-child(even) {
- background: linear-gradient(0deg, #008599 0%, #08596d 100%);
- }
- }
- }
-
- .TopTableListSpan {
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- height: 34px;
- line-height: 34px;
- display: inline-block;
- box-sizing: border-box;
- overflow: hidden;
- text-overflow: ellipsis; /* 超出宽度后显示省略号 */
- white-space: nowrap; /* 限制不允许换行 */
- }
- .TopTableListSpan1 {
- width: 20%;
- text-align: left;
- padding-left: 10px;
- }
- .TopTableListSpan2 {
- width: 25%;
- text-align: center;
- }
- .TopTableListSpan3 {
- width: 20%;
- text-align: center;
- }
- .TopTableListSpan4 {
- width: 10%;
- text-align: center;
- }
- .TopTableListSpan5 {
- width: 15%;
- text-align: center;
- }
- .TopTableListSpan6 {
- width: 10%;
- text-align: right;
- padding-right: 10px;
-
- .TopTableListSpanImg {
- width: 15px;
- height: 19px;
- margin: 7px;
- cursor: pointer;
- }
- .TopTableListSpanImg2 {
- width: 19px;
- height: 19px;
- margin: 7px;
- cursor: pointer;
- }
- }
- }
- .bottomBox {
- width: calc(100% - 1040px);
- 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%);
- border-radius: 6px;
- border: 1px solid #47eef3;
- box-sizing: border-box;
- box-shadow: inset 0 0 5px 5px #47eef38a;
- padding: 10px;
- .TopTableHeader {
- width: 100%;
- height: 34px;
- background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
- border: 1px solid #74dde1;
- display: flex;
- }
-
- .TopTableBody {
- width: 100%;
- height: calc(100% - 34px);
- overflow: auto;
- // display: flex;
- // flex-direction: column;
- // flex-wrap: nowrap;
-
- .TopTableBody_list {
- display: inline-block;
- width: 100%;
- height: 34px;
- /* 选择偶数行 */
- &:nth-child(even) {
- background: linear-gradient(0deg, #008599 0%, #08596d 100%);
- }
- }
- }
-
- .TopTableListSpan {
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- height: 34px;
- line-height: 34px;
- display: inline-block;
- box-sizing: border-box;
- overflow: hidden;
- text-overflow: ellipsis; /* 超出宽度后显示省略号 */
- white-space: nowrap; /* 限制不允许换行 */
- }
-
- .TopTableListSpan1 {
- width: 25%;
- text-align: left;
- padding-left: 10px;
- }
- .TopTableListSpan2 {
- width: 25%;
- text-align: center;
- }
- .TopTableListSpan3 {
- width: 25%;
- text-align: center;
- }
- .TopTableListSpan4 {
- width: 25%;
- text-align: right;
- padding-right: 10px;
- }
- }
-
- // 左右两侧展示板块公共样式
- .ComBox {
- width: 100%;
- box-sizing: border-box;
- .Box_header {
- width: 100%;
- height: 43px;
- background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
- background-size: cover;
- font-family: PangMenZhengDao;
- font-weight: 400;
- font-size: 23px;
- color: #ebfeff;
- line-height: 43px;
- box-sizing: border-box;
- padding-left: 35px;
- }
-
- .Box_Body {
- width: 100%;
- height: calc(100% - 43px);
- box-sizing: border-box;
- position: relative;
- overflow: auto;
- }
- }
- .color_red {
- color: #ff3f3f !important;
- }
- .IssueWarning {
- width: 40px;
- height: 60px;
- position: absolute;
- bottom: 150px;
- left: 1400px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 13px;
- color: #ffffff;
- text-align: center;
- background: #003756;
- border-radius: 28px;
- border: 1px solid #53c6c9;
- display: flex;
- align-items: center;
- cursor: pointer;
- box-shadow: inset 0 0 5px 2px #47eef38a;
- }
- }
- </style>