| | <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; |
---|
| |
---|
| | |
|