Newer
Older
DH_Apicture / src / views / pictureOnMap / page / DrainageSystem / WSIndex.vue
@zhangqy zhangqy 24 days ago 41 KB 优化街景
  1. <template>
  2. <!-- 排水体系 -->
  3. <div class="WSIndex">
  4. <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
  5. <Transition name="fade_left">
  6. <div :class="['moduleBox', 'moduleBoxLeft']" v-show="!showPanel">
  7. <!-- 顶部公共标题 -->
  8. <div class="CrumbesTitle">
  9. <!-- 一级 -->
  10. <span
  11. class="crumbs"
  12. v-for="item in AllData.TitleName"
  13. :key="item.grade"
  14. v-show="item.abbreviation"
  15. @click="MBClick(item)"
  16. >
  17. {{ item.grade != "one" ? "/" : "" }}
  18. {{ item.abbreviation ? item.abbreviation : "" }}
  19. </span>
  20. </div>
  21. <div class="modular1">
  22. <div class="leve2Title">
  23. {{
  24. AllData.regionGrade == "one"
  25. ? "排水户统计"
  26. : AllData.regionGrade == "two"
  27. ? "排水户统计"
  28. : AllData.regionGrade == "three"
  29. ? "排水户统计"
  30. : AllData.regionGrade == "four"
  31. ? "水量统计"
  32. : ""
  33. }}
  34. {{ AllData.TjData1 ? `(${AllData.TjData1 + AllData.TjData1Unit})` : `` }}
  35. </div>
  36. <div class="modularBody">
  37. <!-- v-if="
  38. AllData.regionGrade == 'one' ||
  39. AllData.regionGrade == 'two' ||
  40. AllData.regionGrade == 'three' ||
  41. AllData.regionGrade == 'four'
  42. " -->
  43. <DraBarCharts2Y
  44. :data="AllData.chartData1"
  45. :refresh="AllData.refresh1"
  46. :ClickData="AllData.ClickData1"
  47. ></DraBarCharts2Y>
  48. </div>
  49. </div>
  50. <div class="modular2">
  51. <div class="leve2Title">
  52. {{
  53. AllData.regionGrade == "one"
  54. ? "管网统计"
  55. : AllData.regionGrade == "two"
  56. ? "管网统计"
  57. : AllData.regionGrade == "three"
  58. ? "排水类别"
  59. : AllData.regionGrade == "four"
  60. ? "排水类别"
  61. : ""
  62. }}
  63. {{ AllData.TjData2 ? `(${AllData.TjData2 + AllData.TjData2Unit})` : `` }}
  64. </div>
  65. <div class="modularBody">
  66. <DraBarChartsLeft
  67. v-if="
  68. AllData.regionGrade == 'one' ||
  69. AllData.regionGrade == 'two' ||
  70. AllData.regionGrade == 'three' ||
  71. AllData.regionGrade == 'four'
  72. "
  73. :data="AllData.chartData2"
  74. :refresh="AllData.refresh2"
  75. :ClickData="AllData.ClickData2"
  76. ></DraBarChartsLeft>
  77. </div>
  78. </div>
  79. <div class="modular3">
  80. <div class="leve2Title">
  81. {{
  82. AllData.regionGrade == "one"
  83. ? "日污水水量"
  84. : AllData.regionGrade == "two"
  85. ? "日污水水量"
  86. : AllData.regionGrade == "three"
  87. ? "日水量统计"
  88. : AllData.regionGrade == "four"
  89. ? "管网统计"
  90. : ""
  91. }}
  92. {{ AllData.TjData3 ? `(${AllData.TjData3 + AllData.TjData3Unit})` : `` }}
  93. </div>
  94. <div class="modularBody">
  95. <DraBarCharts2Y
  96. v-if="
  97. AllData.regionGrade == 'one' ||
  98. AllData.regionGrade == 'two' ||
  99. AllData.regionGrade == 'three' ||
  100. AllData.regionGrade == 'four'
  101. "
  102. :data="AllData.chartData3"
  103. :refresh="AllData.refresh3"
  104. :ClickData="AllData.ClickData3"
  105. ></DraBarCharts2Y>
  106. </div>
  107. </div></div
  108. ></Transition>
  109. <!-- 右侧面板 -->
  110. <Transition name="fade_right">
  111. <div
  112. :class="['moduleBox', 'moduleBoxRight']"
  113. v-show="
  114. !showPanel &&
  115. AllData.RightShow &&
  116. AllData.RightShowType == 'sewage_pipeline_quality'
  117. "
  118. >
  119. <!-- 顶部公共标题 -->
  120. <div class="CrumbesTitle">
  121. <span class="crumbs2" @click="OpenGongGongDialog()">{{
  122. AllData.ClicksiteName
  123. }}</span>
  124. </div>
  125. <div class="modular1_right">
  126. <RightCharts
  127. :data="AllData.chartDataRight"
  128. :refresh="AllData.refreshRight"
  129. v-if="AllData.refreshRight != 0"
  130. ></RightCharts>
  131. </div>
  132. <div class="modular2_right">
  133. <div class="leve2Title">水量分析</div>
  134. <div class="modularBody">
  135. <div class="SLList">
  136. <div class="SlList1P">
  137. <el-tooltip :content="AllData.SLFX.nowDay + '万吨'" placement="top">
  138. <span class="SlListNum">{{
  139. AllData.SLFX.nowDay ? AllData.SLFX.nowDay : "--"
  140. }}</span>
  141. </el-tooltip>
  142. <span class="SlListUnit">万吨</span>
  143. </div>
  144. <div class="SlList2P">今日水量</div>
  145. </div>
  146. <div class="SLList">
  147. <div class="SlList1P">
  148. <el-tooltip :content="AllData.SLFX.yesterday + '万吨'" placement="top">
  149. <span class="SlListNum">{{
  150. AllData.SLFX.yesterday ? AllData.SLFX.yesterday : "--"
  151. }}</span>
  152. </el-tooltip>
  153. <span class="SlListUnit">万吨</span>
  154. </div>
  155. <div class="SlList2P">昨日水量</div>
  156. </div>
  157. <div class="SLList">
  158. <div class="SlList1P">
  159. <el-tooltip :content="AllData.SLFX.average + '万吨'" placement="top">
  160. <span class="SlListNum">{{
  161. AllData.SLFX.average ? AllData.SLFX.average : "--"
  162. }}</span>
  163. </el-tooltip>
  164. <span class="SlListUnit">万吨</span>
  165. </div>
  166. <div class="SlList2P">7日平均水量</div>
  167. </div>
  168. </div>
  169. </div>
  170. <div class="modular3_right">
  171. <div class="leve2Title">管网本底</div>
  172. <div class="modularBody">
  173. <div class="ListInfo50">
  174. <div class="ListInfo_label">类型:</div>
  175. <div class="ListInfo_value">
  176. {{
  177. AllData.GWBD.pointType == "YS"
  178. ? "雨水管网"
  179. : AllData.GWBD.pointType == "WS"
  180. ? "污水管网"
  181. : "--"
  182. }}
  183. </div>
  184. </div>
  185. <div class="ListInfo50">
  186. <div class="ListInfo_label">设计编号:</div>
  187. <div class="ListInfo_value">
  188. {{ AllData.GWBD.stAsName ? AllData.GWBD.stAsName : "--" }}
  189. </div>
  190. </div>
  191. <div class="ListInfo100">
  192. <div class="ListInfo_label">管井编码:</div>
  193. <div class="ListInfo_value">
  194. {{ AllData.GWBD.pointNumber ? AllData.GWBD.pointNumber : "--" }}
  195. </div>
  196. </div>
  197. <div class="ListInfo100">
  198. <div class="ListInfo_label">站点编号:</div>
  199. <div class="ListInfo_value">
  200. {{ AllData.RightStCode ? AllData.RightStCode : "--" }}
  201. </div>
  202. </div>
  203.  
  204. <div class="ListInfo50">
  205. <div class="ListInfo_label">年份:</div>
  206. <div class="ListInfo_value">
  207. {{ AllData.GWBD.buildTime ? AllData.GWBD.buildTime : "--" }}
  208. </div>
  209. </div>
  210. <div class="ListInfo50">
  211. <div class="ListInfo_label">管径:</div>
  212. <div class="ListInfo_value">
  213. {{ AllData.GWBD.pipelineDiameter ? AllData.GWBD.pipelineDiameter : "--" }}
  214. </div>
  215. </div>
  216. <div class="ListInfo50">
  217. <div class="ListInfo_label">材质:</div>
  218. <div class="ListInfo_value">
  219. {{ AllData.GWBD.pipelineTexture ? AllData.GWBD.pipelineTexture : "--" }}
  220. </div>
  221. </div>
  222. <div class="ListInfo50">
  223. <div class="ListInfo_label">缺陷类型:</div>
  224. <div class="ListInfo_value">
  225. {{ AllData.GWBD.issueType ? AllData.GWBD.issueType : "--" }}
  226. </div>
  227. </div>
  228. <div class="ListInfo50">
  229. <div class="ListInfo_label">所在道路:</div>
  230. <div class="ListInfo_value">
  231. {{ AllData.GWBD.roadName ? AllData.GWBD.roadName : "--" }}
  232. </div>
  233. </div>
  234. <div class="ListInfo50">
  235. <div class="ListInfo_label">所属标段:</div>
  236. <div class="ListInfo_value">
  237. {{ AllData.GWBD.watchAreaName ? AllData.GWBD.watchAreaName : "--" }}
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242. </div>
  243. </Transition>
  244. <!-- 泵站信息 -->
  245. <Transition name="fade_right">
  246. <div
  247. :class="['moduleBox', 'moduleBoxRight']"
  248. v-if="
  249. !showPanel &&
  250. AllData.RightShow &&
  251. AllData.RightShowType == 'sewage_pump_station_info'
  252. "
  253. >
  254. <!-- 顶部公共标题 -->
  255. <div class="CrumbesTitle">
  256. <span class="crumbs2" @click="OpenGongGongDialog()">{{
  257. AllData.ClicksiteName
  258. }}</span>
  259. </div>
  260.  
  261. <div class="modularRight2">
  262. <BengZhanInfo
  263. :Datatype="AllData.RightShowType"
  264. :DataId="AllData.RightShowID"
  265. :Type="AllData.TypeID"
  266. ></BengZhanInfo>
  267. </div>
  268. </div>
  269. </Transition>
  270. </div>
  271. </template>
  272.  
  273. <script setup name="WSIndex">
  274. import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
  275. import bus from "@/bus";
  276. // 引入接口
  277. import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
  278. import moment from "moment";
  279. import { getEchart } from "@/api/MonitorAssetsOnMap";
  280.  
  281. // 引入echarts组件
  282. // 纵向立体柱状体以及标线和折现
  283. import DraBarCharts2Y from "./components/DraBarCharts2Y.vue";
  284. //横向的两组柱状图堆叠
  285. import DraBarChartsLeft from "./components/DraBarChartsLeft.vue";
  286. // 右侧面板接入
  287. import RightCharts from "./components/RightCharts.vue";
  288. import BengZhanInfo from "./BengZhanRight.vue";
  289. // 面板控制组件
  290. import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
  291. const showPanel = ref(false); //面板展开收起
  292. const PanelChange = (val) => {
  293. showPanel.value = val;
  294. };
  295.  
  296. const AllData = reactive({
  297. TypeID: "sewage",
  298. regionGrade: "one", //分区级别(one:一级 || two:二级 || three:三级 || four:四级)
  299. regionName: "", //分区名称
  300. waterRegionCode: "", //分区编号
  301. RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
  302. RightShowID: "",
  303. RightGeometry: "",
  304. RightShowType: "",
  305. RightStCode: "",
  306. TitleName: [
  307. {
  308. abbreviation: "高新区", //分区缩写-动态
  309. id: "", //分区信息-动态
  310. grade: "one", //分区层级-静态(查询数据用)
  311. sort: 0, //面包屑的顺序
  312. Name: "", //全称
  313. },
  314. {
  315. abbreviation: "", //分区缩写-动态
  316. id: "", //分区信息-动态
  317. grade: "two", //分区层级-静态
  318. sort: 1, //面包屑的顺序
  319. Name: "", //全称
  320. },
  321. {
  322. abbreviation: "", //分区缩写-动态
  323. id: "", //分区信息-动态
  324. grade: "three", //分区层级-静态
  325. sort: 2, //面包屑的顺序
  326. Name: "", //全称
  327. },
  328. {
  329. abbreviation: "", //分区缩写-动态
  330. id: "", //分区信息-动态
  331. grade: "four", //分区层级-静态
  332. sort: 3, //面包屑的顺序
  333. Name: "", //全称
  334. },
  335. {
  336. abbreviation: "", //分区缩写-动态
  337. id: "", //分区信息-动态
  338. grade: "five", //分区层级-静态
  339. sort: 4, //面包屑的顺序
  340. Name: "", //全称
  341. },
  342. ],
  343. // Ecahrts数据
  344. // 河湖水情
  345. chartData1: {
  346. // 一级
  347. // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
  348. // y1_Unit: "m", //Y轴单位
  349. // y2_Unit: "万方", //2号Y轴单位
  350. // y2_show: true, //是否展示右侧的2号轴
  351. // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
  352. // yAxis1_bar_Name: "当前水位", //数据1的名称
  353. // yAxis1_bar_index: 0,
  354. // yAxis2_bar: null, //数据2
  355. // yAxis2_bar_Name: "", //数据1的名称
  356. // yAxis2_bar_index: 0,
  357. // yAxis2_line: ["80", "90", "40", "50", "60", "60"],
  358. // yAxis2_line_Name: "设防水位",
  359. // yAxis2_line_Index: 0,
  360. // yAxis3_line: ["90", "98", "110", "80", "60", "70"],
  361. // yAxis3_line_Name: "库容量",
  362. // yAxis3_line_Index: 1,
  363. xAxis: [], //X轴数据
  364. y1_Unit: "", //Y轴单位
  365. y2_Unit: "", //Y轴单位
  366. y2_show: false,
  367. yAxis1_bar: [], //数据1
  368. yAxis1_bar_Name: "", //数据1的名称
  369. yAxis1_bar_index: 0,
  370. yAxis2_bar: null, //数据2
  371. yAxis2_bar_Name: "", //数据1的名称
  372. yAxis2_bar_index: 0,
  373. yAxis2_line: null,
  374. yAxis2_line_Name: "",
  375. yAxis2_line_Index: 0,
  376. yAxis3_line: null,
  377. yAxis3_line_Name: "",
  378. yAxis3_line_Index: 0,
  379. },
  380. refresh1: 0,
  381. ClickData1: "dgtxg",
  382. // 流域管网
  383. chartData2: {
  384. xAxis: [],
  385. yAxis: [],
  386. yAxis2: [],
  387. yAxis_Name: "",
  388. yAxis2_Name: "",
  389. },
  390. refresh2: 0,
  391. ClickData2: "dgtxg",
  392. // 河湖排口
  393. chartData3: {
  394. // 三级
  395. xAxis: [], //X轴数据
  396. y1_Unit: "", //Y轴单位
  397. y2_Unit: "", //Y轴单位
  398. y2_show: false,
  399. yAxis1_bar: [], //数据1
  400. yAxis1_bar_Name: "", //数据1的名称
  401. yAxis1_bar_index: 0,
  402. yAxis2_bar: null, //数据2
  403. yAxis2_bar_Name: "", //数据1的名称
  404. yAxis2_bar_index: 0,
  405. yAxis2_line: null,
  406. yAxis2_line_Name: "",
  407. yAxis2_line_Index: 0,
  408. yAxis3_line: null,
  409. yAxis3_line_Name: "",
  410. yAxis3_line_Index: 0,
  411. },
  412. refresh3: 0,
  413. ClickData3: "dgtxg",
  414. GWBD: {},
  415. SLFX: {},
  416. chartDataRight: {
  417. yAxis: [],
  418. yAxis_Name: "降雨量(mm)",
  419. yAxis2: [],
  420. yAxis2_Name: "流速(m/s)",
  421. yAxis3: [],
  422. yAxis3_Name: "水深(m)",
  423. yAxis4: [],
  424. yAxis4_Name: "5分钟水量(m³)",
  425. xAxis: [],
  426. },
  427. refreshRight: 0,
  428. ClicksiteName: "",
  429. TjData1: 0,
  430. TjData1Unit: "",
  431. TjData2: 0,
  432. TjData2Unit: "",
  433. TjData3: 0,
  434. TjData3Unit: "",
  435. });
  436. // 面包屑点击事件
  437. const MBClick = (item) => {
  438. console.log(item);
  439. AllData.RightShow = false;
  440. AllData.RightShowID = "";
  441. AllData.RightShowType = "";
  442. // 赋值需要进行echarts数据请求的数据
  443. AllData.regionGrade = item.grade;
  444. AllData.regionName = item.Name;
  445. AllData.waterRegionCode = item.id;
  446. clearEchartsData();
  447. // debugger;
  448. // 视角切换
  449. if (item.sort == 0) {
  450. // 回到默认图层
  451. newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  452. bus.emit(mapInitBusName);
  453. AllData.regionGrade = "one";
  454. AllData.regionName = "";
  455. AllData.waterRegionCode = "";
  456. AllData.TitleName[1] = {
  457. abbreviation: "",
  458. Name: "",
  459. id: "",
  460. grade: "two",
  461. sort: 1,
  462. };
  463. AllData.TitleName[2] = {
  464. abbreviation: "",
  465. Name: "",
  466. id: "",
  467. grade: "three",
  468. sort: 2,
  469. };
  470. AllData.TitleName[3] = {
  471. abbreviation: "",
  472. Name: "",
  473. id: "",
  474. grade: "four",
  475. sort: 3,
  476. };
  477. AllData.TitleName[4] = {
  478. abbreviation: "",
  479. Name: "",
  480. id: "",
  481. grade: "five",
  482. sort: 4,
  483. };
  484.  
  485. // 切换时进行数据请求,默认视角请求
  486. getData1();
  487. getData2();
  488. getData3();
  489. }
  490. if (item.sort == 1) {
  491. bus.emit("panelDataToMap", {
  492. name: item.Name,
  493. id: item.id,
  494. });
  495. AllData.TitleName[2] = {
  496. abbreviation: "",
  497. Name: "",
  498. id: "",
  499. grade: "three",
  500. sort: 2,
  501. };
  502. AllData.TitleName[3] = {
  503. abbreviation: "",
  504. Name: "",
  505. id: "",
  506. grade: "four",
  507. sort: 3,
  508. };
  509. AllData.TitleName[4] = {
  510. abbreviation: "",
  511. Name: "",
  512. id: "",
  513. grade: "five",
  514. sort: 4,
  515. };
  516.  
  517. // 切换时进行数据请求,默认视角请求
  518. getData1();
  519. getData2();
  520. getData3();
  521. }
  522. if (item.sort == 2) {
  523. bus.emit("panelDataToMap", {
  524. name: item.Name,
  525. id: item.id,
  526. });
  527. AllData.TitleName[3] = {
  528. abbreviation: "",
  529. Name: "",
  530. id: "",
  531. grade: "four",
  532. sort: 3,
  533. };
  534. AllData.TitleName[4] = {
  535. abbreviation: "",
  536. Name: "",
  537. id: "",
  538. grade: "five",
  539. sort: 4,
  540. };
  541.  
  542. // 切换时进行数据请求,默认视角请求
  543. getData2();
  544. getData3();
  545. getData4();
  546. }
  547. if (item.sort == 3) {
  548. bus.emit("panelDataToMap", {
  549. name: item.Name,
  550. id: item.id,
  551. });
  552. AllData.TitleName[4] = {
  553. abbreviation: "",
  554. Name: "",
  555. id: "",
  556. grade: "five",
  557. sort: 4,
  558. };
  559.  
  560. getData3();
  561. getData1();
  562. getData4();
  563. }
  564. if (item.sort == 4) {
  565. bus.emit("panelDataToMap", {
  566. name: item.Name,
  567. id: item.id,
  568. });
  569. }
  570. };
  571. // 分区点击切换
  572. const FenQuClick = (Row) => {
  573. console.log("FenQuClick", Row.properties, Row.layerId);
  574. //判断点击的是片区还是点位
  575. if (Row.layerId == "排水分区") {
  576. // 片区
  577. AllData.RightShow = false;
  578. AllData.RightShowID = false;
  579. AllData.RightShowType = "排水分区";
  580. // if (!!!Row.properties.pid) return;
  581. // 原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
  582. if (Row.properties.level == "4") return;
  583. // 请求面包屑的数据
  584. let params = {
  585. regionType: AllData.TypeID,
  586. id: Number(Row.properties.pid || Row.properties.w_id),
  587. };
  588. MonitorAPI.lineGrade(params).then((res) => {
  589. if (res && res.code == 200) {
  590. // 污水
  591. AllData.TitleName[0].abbreviation = "高新区";
  592. AllData.TitleName[0].id = ""; //分区信息-动态
  593. AllData.TitleName[0].grade = "one"; //分区层级-静态
  594. AllData.TitleName[0].sort = 0; //面包屑的顺序
  595. AllData.TitleName[0].Name = ""; //全称
  596.  
  597. // 设置1 2 3 4 级分区
  598. clearMianBaoData();
  599. res.data.forEach((element) => {
  600. if (element.grade == "one") {
  601. AllData.TitleName[1] = {
  602. abbreviation: element.shortName ? element.shortName : element.name,
  603. id: element.id,
  604. grade: "two",
  605. sort: 1,
  606. Name: element.name,
  607. };
  608. }
  609. if (element.grade == "two") {
  610. AllData.TitleName[2] = {
  611. abbreviation: element.shortName ? element.shortName : element.name,
  612. id: element.id,
  613. grade: "three",
  614. sort: 2,
  615. Name: element.name,
  616. };
  617. }
  618. if (element.grade == "three") {
  619. AllData.TitleName[3] = {
  620. abbreviation: element.shortName ? element.shortName : element.name,
  621. id: element.id,
  622. grade: "four",
  623. sort: 3,
  624. Name: element.name,
  625. };
  626. }
  627. if (element.grade == "four") {
  628. AllData.TitleName[4] = {
  629. abbreviation: element.shortName ? element.shortName : element.name,
  630. id: element.id,
  631. grade: "five",
  632. sort: 4,
  633. Name: element.name,
  634. };
  635. }
  636. });
  637. // }
  638. // 赋值需要进行echarts数据请求的数据
  639. AllData.regionGrade =
  640. res.data.length == 1
  641. ? "two"
  642. : res.data.length == 2
  643. ? "three"
  644. : res.data.length == 3
  645. ? "four"
  646. : "five"; //分区级别(one:一级 || two:二级 || three:三级 || four:四级)
  647. AllData.regionName = AllData.TitleName[res.data.length].Name;
  648. AllData.waterRegionCode = AllData.TitleName[res.data.length].id;
  649. clearEchartsData();
  650. if (AllData.regionGrade == "two") {
  651. // 二级
  652. console.log("二级");
  653. getData1();
  654. getData2();
  655. getData3();
  656. } else if (AllData.regionGrade == "three") {
  657. // 三级
  658. console.log("三级");
  659. getData2();
  660. getData3();
  661. getData4();
  662. } else if (AllData.regionGrade == "four") {
  663. // 四级
  664. console.log("四级");
  665. getData3();
  666. getData1();
  667. getData4();
  668. } else {
  669. // 五级 五级为排水单元,由上可知,因为没有pid 所以此方法无效
  670. console.log("五级");
  671. }
  672. }
  673. });
  674. } else if (Row.layerId == "point") {
  675. // 点位
  676. if (AllData.RightShowID == Row.properties.id) {
  677. // 说明是同样的一个点点了两次,所以进行关闭
  678. AllData.RightShow = false;
  679. AllData.RightShowID = "";
  680. AllData.RightStCode = "";
  681. AllData.RightGeometry = "";
  682. } else {
  683. AllData.RightStCode = Row.properties.stCode;
  684. // 管点
  685. if (Row.properties.pointType == "sewage_pipeline_quality") {
  686. AllData.ClicksiteName = Row.properties.name;
  687. AllData.RightShowID = Row.properties.id;
  688. AllData.RightGeometry = Row.properties.geometry;
  689. AllData.RightShowType = "sewage_pipeline_quality";
  690. AllData.RightShow = true;
  691. // Row.properties.wellCode
  692. // 获取管网信息
  693. console.log("Row", Row);
  694. if (!!Row.properties.wellCode) {
  695. MonitorAPI.pipelinePointPage({
  696. pointNumber: Row.properties.wellCode,
  697. }).then((res) => {
  698. if (res && res.code == 200) {
  699. AllData.GWBD = res.data[0];
  700. }
  701. });
  702. } else {
  703. AllData.GWBD = {
  704. pointType: "--",
  705. pointNumber: "--",
  706. stAsName: "--",
  707. stCode: AllData.RightStCode || "--",
  708. buildTime: "--",
  709. pipelineDiameter: "--",
  710. pipelineTexture: "--",
  711. issueType: "--",
  712. roadName: "--",
  713. watchAreaName: "--",
  714. };
  715. }
  716.  
  717. // 上下游水量分析
  718. getDataSXY(Row.properties);
  719. // 获取echarts数据
  720. // setTimeout(() => {
  721. AllData.chartDataRight = {
  722. yAxis: [],
  723. yAxis_Name: "降雨量(mm)",
  724. yAxis2: [],
  725. yAxis2_Name: "流速(m/s)",
  726. yAxis3: [],
  727. yAxis3_Name: "水深(m)",
  728. yAxis4: [],
  729. yAxis4_Name: "5分钟水量(m³)",
  730. xAxis: [],
  731. };
  732. AllData.refreshRight = 0;
  733. GetRightCharts(Row.properties);
  734. // }, 900);
  735. }
  736. // 泵站
  737. if (Row.properties.pointType == "sewage_pump_station_info") {
  738. if (Row.properties.id == "") {
  739. // 不展示
  740. AllData.ClicksiteName = "";
  741. AllData.RightShow = false;
  742. AllData.RightShowID = "";
  743. AllData.RightGeometry = "";
  744. AllData.RightShowType = "";
  745. } else {
  746. AllData.ClicksiteName = Row.properties.name;
  747. AllData.RightShowID = Row.properties.id;
  748. AllData.RightShowType = "sewage_pump_station_info";
  749. AllData.RightGeometry = Row.properties.geometry;
  750. AllData.RightShow = true;
  751. }
  752. }
  753. // 污水处理厂
  754. if (Row.properties.pointType == "sewage_factory_info") {
  755. if (Row.properties.id == "") {
  756. // 不展示
  757. AllData.ClicksiteName = "";
  758. AllData.RightShow = false;
  759. AllData.RightShowID = "";
  760. AllData.RightShowType = "";
  761. } else {
  762. AllData.ClicksiteName = Row.properties.name;
  763. AllData.RightShowID = Row.properties.id;
  764. AllData.RightShowType = "sewage_factory_info";
  765. AllData.RightShow = true;
  766. }
  767. }
  768. }
  769. }
  770. };
  771.  
  772. // 清除面包屑的数据
  773. const clearMianBaoData = () => {
  774. AllData.TitleName[1] = {
  775. abbreviation: "",
  776. Name: "",
  777. id: "",
  778. grade: "two",
  779. sort: 1,
  780. };
  781. AllData.TitleName[2] = {
  782. abbreviation: "",
  783. Name: "",
  784. id: "",
  785. grade: "three",
  786. sort: 2,
  787. };
  788. AllData.TitleName[3] = {
  789. abbreviation: "",
  790. Name: "",
  791. id: "",
  792. grade: "four",
  793. sort: 3,
  794. };
  795. AllData.TitleName[4] = {
  796. abbreviation: "",
  797. Name: "",
  798. id: "",
  799. grade: "five",
  800. sort: 4,
  801. };
  802. };
  803. // 获取数据 徐云欣 一级界面的管网统计/二级界面的管网统计/四级界面的管网统计
  804. const getData1 = () => {
  805. MonitorAPI.pipelineProblemStatistic({
  806. regionGrade: AllData.regionGrade, //分区级别(one:一级 || two:二级 || three:三级 || four:四级 || five:五级)
  807. regionName: AllData.regionName, //分区名称
  808. regionType: AllData.TypeID, //分区类型(sewage:污水 || rain:雨水)
  809. }).then((res) => {
  810. if (res && res.code == 200) {
  811. if (AllData.regionGrade == "one") {
  812. // 一级Ecahrts 名称
  813. AllData.chartData2.yAxis_Name = "问题管网";
  814. // 数据赋值
  815. AllData.chartData2.xAxis = res.data.regionNameList;
  816. AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
  817. AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
  818. AllData.chartData2.yAxis2_Name = "总长度";
  819. AllData.chartData2.y1_Unit = "km";
  820. AllData.refresh2++;
  821. AllData.TjData2 = Number(
  822. res.data.pipelineLengthList.reduce(
  823. (accu, curren) => Number(accu) + Number(curren)
  824. )
  825. ).toFixed(2);
  826. AllData.TjData2Unit = "km";
  827. }
  828. if (AllData.regionGrade == "two") {
  829. // 二级Ecahrts 名称
  830. AllData.chartData2.yAxis_Name = "问题管网";
  831. // 数据赋值
  832. AllData.chartData2.xAxis = res.data.regionNameList;
  833. AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
  834. AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
  835. AllData.chartData2.yAxis2_Name = "总长度";
  836. AllData.chartData2.y1_Unit = "km";
  837. AllData.refresh2++;
  838. AllData.TjData2 = Number(
  839. res.data.pipelineLengthList.reduce(
  840. (accu, curren) => Number(accu) + Number(curren)
  841. )
  842. ).toFixed(2);
  843. AllData.TjData2Unit = "km";
  844. }
  845. if (AllData.regionGrade == "four") {
  846. AllData.chartData3.xAxis = res.data.problemNameList; //X轴数据
  847. AllData.chartData3.y1_Unit = "km"; //Y轴单位
  848. AllData.chartData3.y2_Unit = ""; //2号Y轴单位
  849. AllData.chartData3.y2_show = false; //是否展示右侧的2号轴
  850. AllData.chartData3.yAxis1_bar = res.data.pipelineProblemLengthList; //数据1
  851. AllData.chartData3.yAxis1_bar_Name = "片区管网问题"; //数据1的名称
  852. AllData.chartData3.yAxis1_bar_index = 0;
  853. AllData.chartData3.yAxis2_bar = null; //数据2
  854. AllData.chartData3.yAxis2_bar_Name = ""; //数据1的名称
  855. AllData.chartData3.yAxis2_bar_index = 0;
  856. AllData.chartData3.yAxis2_line = null;
  857. AllData.chartData3.yAxis2_line_Name = "";
  858. AllData.chartData3.yAxis2_line_Index = 1;
  859. AllData.chartData3.yAxis3_line = null;
  860. AllData.chartData3.yAxis3_line_Name = "";
  861. AllData.chartData3.yAxis3_line_Index = 1;
  862. AllData.refresh3++;
  863. AllData.TjData3 = Number(
  864. res.data.pipelineProblemLengthList.reduce(
  865. (accu, curren) => Number(accu) + Number(curren)
  866. )
  867. ).toFixed(0);
  868. AllData.TjData3Unit = "km";
  869. // // 二级Ecahrts 名称
  870. // AllData.chartData2.yAxis_Name = "问题管网";
  871. // // 数据赋值
  872. // AllData.chartData2.xAxis = res.data.regionNameList;
  873. // AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
  874. // AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
  875. // AllData.chartData2.yAxis2_Name = "总长度";
  876. // AllData.chartData2.y1_Unit = "km";
  877. // AllData.refresh2++;
  878. // AllData.TjData2 = res.data.pipelineLengthList
  879. // .reduce((accu, curren) => Number(accu) + Number(curren))
  880. // .toFixed(2);
  881. // AllData.TjData2Unit = "km";
  882. }
  883. }
  884. });
  885. };
  886. // 获取数据 刘芳阳 一级界面的污水水量(日)/二级界面的污水水量(日)/三级界面的水量统计(日)/四级界面的排水量
  887. const getData2 = () => {
  888. MonitorAPI.sewageWaterRegionWaterYieldAnalysis({
  889. sewageWaterRegionId: AllData.waterRegionCode ? AllData.waterRegionCode : 0,
  890. }).then((res) => {
  891. if (res && res.code == 200) {
  892. let XData = []; //片区名称
  893. let data1 = []; //站点数
  894. let data2 = []; //进水量
  895. let data3 = []; //出水量
  896. res.data.forEach((element) => {
  897. XData.push(element.waterRegionName);
  898. data1.push(element.siteNum);
  899. data2.push(element.inWaterYield);
  900. data3.push(element.outWaterYield);
  901. });
  902. if (AllData.regionGrade == "one" || AllData.regionGrade == "three") {
  903. AllData.chartData3.xAxis = XData; //X轴数据
  904. AllData.chartData3.y1_Unit = "万方"; //Y轴单位
  905. AllData.chartData3.y2_Unit = "个"; //2号Y轴单位
  906. AllData.chartData3.y2_show = false; //是否展示右侧的2号轴
  907. AllData.chartData3.yAxis1_bar = data2; //数据1
  908. AllData.chartData3.yAxis1_bar_Name = "进水量"; //数据1的名称
  909. AllData.chartData3.yAxis1_bar_index = 0;
  910. AllData.chartData3.yAxis2_bar = null; //数据2
  911. AllData.chartData3.yAxis2_bar_Name = ""; //数据1的名称
  912. AllData.chartData3.yAxis2_bar_index = 0;
  913. AllData.chartData3.yAxis2_line = null;
  914. AllData.chartData3.yAxis2_line_Name = "";
  915. AllData.chartData3.yAxis2_line_Index = 1;
  916. AllData.chartData3.yAxis3_line = null;
  917. AllData.chartData3.yAxis3_line_Name = "";
  918. AllData.chartData3.yAxis3_line_Index = 1;
  919. AllData.refresh3++;
  920. AllData.TjData3 = Number(
  921. data2.reduce((accu, curren) => Number(accu) + Number(curren))
  922. ).toFixed(0);
  923. AllData.TjData3Unit = "万方";
  924. }
  925. if (AllData.regionGrade == "two") {
  926. AllData.chartData3.xAxis = XData; //X轴数据
  927. AllData.chartData3.y1_Unit = "万方"; //Y轴单位
  928. AllData.chartData3.y2_Unit = "个"; //2号Y轴单位
  929. AllData.chartData3.y2_show = false; //是否展示右侧的2号轴
  930. AllData.chartData3.yAxis1_bar = data2; //数据1
  931. AllData.chartData3.yAxis1_bar_Name = "进水量"; //数据1的名称
  932. AllData.chartData3.yAxis1_bar_index = 0;
  933. AllData.chartData3.yAxis2_bar = data3; //数据2
  934. AllData.chartData3.yAxis2_bar_Name = "出水量"; //数据1的名称
  935. AllData.chartData3.yAxis2_bar_index = 0;
  936. AllData.chartData3.yAxis2_line = null;
  937. AllData.chartData3.yAxis2_line_Name = "";
  938. AllData.chartData3.yAxis2_line_Index = 1;
  939. AllData.chartData3.yAxis3_line = null;
  940. AllData.chartData3.yAxis3_line_Name = "";
  941. AllData.chartData3.yAxis3_line_Index = 1;
  942. AllData.refresh3++;
  943. AllData.TjData3 = Number(
  944. data2.reduce((accu, curren) => Number(accu) + Number(curren))
  945. ).toFixed(0);
  946. AllData.TjData3Unit = "万方";
  947. }
  948. }
  949. });
  950. };
  951. // 获取数据 谢杨 一级界面的排水户统计/ 二级界面的排水户统计/ 三级界面的排水户统计
  952. const getData3 = () => {
  953. MonitorAPI.queryDrainageUserInfo({
  954. regionId: AllData.waterRegionCode,
  955. }).then((res) => {
  956. if (res && res.code == 200) {
  957. if (
  958. AllData.regionGrade == "one" ||
  959. AllData.regionGrade == "two" ||
  960. AllData.regionGrade == "three"
  961. ) {
  962. AllData.chartData1.xAxis = res.data.partitionName; //X轴数据
  963. AllData.chartData1.y1_Unit = "个"; //Y轴单位
  964. AllData.chartData1.y2_Unit = "个"; //2号Y轴单位
  965. AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
  966. AllData.chartData1.yAxis1_bar = res.data.drainageNumber; //数据1
  967. AllData.chartData1.yAxis1_bar_Name = "排水户"; //数据1的名称
  968. AllData.chartData1.yAxis1_bar_index = 0;
  969. AllData.chartData1.yAxis2_bar = res.data.keyDrainageNumber; //数据2
  970. AllData.chartData1.yAxis2_bar_Name = "重点排水户"; //数据1的名称
  971. AllData.chartData1.yAxis2_bar_index = 0;
  972. AllData.chartData1.yAxis2_line = res.data.rtuNumber;
  973. AllData.chartData1.yAxis2_line_Name = "监测设备";
  974. AllData.chartData1.yAxis2_line_Index = 1;
  975. AllData.chartData1.yAxis3_line = null;
  976. AllData.chartData1.yAxis3_line_Name = "";
  977. AllData.chartData1.yAxis3_line_Index = 1;
  978. AllData.refresh1++;
  979. AllData.TjData1 = Number(
  980. res.data.drainageNumber.reduce((accu, curren) => Number(accu) + Number(curren))
  981. ).toFixed(0);
  982. AllData.TjData1Unit = "个";
  983. }
  984. if (AllData.regionGrade == "four") {
  985. AllData.chartData1.xAxis = res.data.partitionName; //X轴数据
  986. AllData.chartData1.y1_Unit = "万方"; //Y轴单位
  987. AllData.chartData1.y2_Unit = "个"; //2号Y轴单位
  988. AllData.chartData1.y2_show = false; //是否展示右侧的2号轴
  989. AllData.chartData1.yAxis1_bar = res.data.drainageVolume; //数据1
  990. AllData.chartData1.yAxis1_bar_Name = "可排水量"; //数据1的名称
  991. AllData.chartData1.yAxis1_bar_index = 0;
  992. AllData.chartData1.yAxis2_bar = res.data.realTimeDrainage; //数据2
  993. AllData.chartData1.yAxis2_bar_Name = "实时排水量"; //数据1的名称
  994. AllData.chartData1.yAxis2_bar_index = 0;
  995. AllData.chartData1.yAxis2_line = null;
  996. AllData.chartData1.yAxis2_line_Name = "";
  997. AllData.chartData1.yAxis2_line_Index = 1;
  998. AllData.chartData1.yAxis3_line = null;
  999. AllData.chartData1.yAxis3_line_Name = "";
  1000. AllData.chartData1.yAxis3_line_Index = 1;
  1001. AllData.refresh1++;
  1002. AllData.TjData1 = Number(
  1003. res.data.drainageVolume.reduce((accu, curren) => Number(accu) + Number(curren))
  1004. ).toFixed(0);
  1005. AllData.TjData1Unit = "万方";
  1006. }
  1007. }
  1008. });
  1009. };
  1010. // 获取数据 谢杨 三级界面的排水类别/四级界面的排水类别
  1011. const getData4 = () => {
  1012. MonitorAPI.queryDrainageType({ regionId: AllData.waterRegionCode }).then((res) => {
  1013. if (res && res.code == 200) {
  1014. if (AllData.regionGrade == "three" || AllData.regionGrade == "four") {
  1015. // 三级Ecahrts 名称
  1016. AllData.chartData2.xAxis = res.data.typeName;
  1017. AllData.chartData2.yAxis = null;
  1018. AllData.chartData2.yAxis_Name = "";
  1019. AllData.chartData2.yAxis2 = res.data.typeNumber;
  1020. AllData.chartData2.yAxis2_Name = "数量";
  1021. AllData.chartData2.y1_Unit = "个";
  1022. AllData.refresh2++;
  1023. AllData.TjData1 = Number(
  1024. res.data.typeNumber.reduce((accu, curren) => Number(accu) + Number(curren))
  1025. ).toFixed(0);
  1026. AllData.TjData1Unit = "个";
  1027. }
  1028. // 数据赋值
  1029. }
  1030. });
  1031. };
  1032. // 获取数据 刘芳阳 上下游分析
  1033. const getDataSXY = (row) => {
  1034. MonitorAPI.siteWaterYieldAnalysisByDate({
  1035. stCode: row.stCode,
  1036. // stType: row.pointType,
  1037. // start: moment().format("YYYY-MM-DD") + " 00:00:00",
  1038. // end: moment().format("YYYY-MM-DD") + " 23:59:59",
  1039. }).then((res) => {
  1040. if (res && res.code == 200) {
  1041. AllData.SLFX = res.data;
  1042. }
  1043. });
  1044. };
  1045. const GetRightCharts = (row) => {
  1046. getEchart({
  1047. stType: row.pointType,
  1048. stCode: row.stCode,
  1049. start: moment().format("YYYY-MM-DD") + " 00:00:00",
  1050. end: moment().format("YYYY-MM-DD") + " 23:59:59",
  1051. }).then((res) => {
  1052. if (res && res.code == 200) {
  1053. res.data.datas.forEach((element) => {
  1054. switch (element.dataKey) {
  1055. case "z":
  1056. AllData.chartDataRight.yAxis3 = element.datas;
  1057. break;
  1058. case "va":
  1059. AllData.chartDataRight.yAxis2 = element.datas;
  1060. break;
  1061. case "pn05":
  1062. AllData.chartDataRight.yAxis = element.datas;
  1063. break;
  1064. case "sbl05":
  1065. AllData.chartDataRight.yAxis4 = element.datas;
  1066. }
  1067. });
  1068. AllData.chartDataRight.xAxis = res.data.times;
  1069. AllData.refreshRight++;
  1070. }
  1071. });
  1072. };
  1073.  
  1074. // 一级界面的河湖水情
  1075. // 清除本底分析echarts的数据
  1076. const clearEchartsData = () => {
  1077. AllData.chartData1 = {
  1078. xAxis: [], //X轴数据
  1079. y1_Unit: "", //Y轴单位
  1080. y2_Unit: "", //2号Y轴单位
  1081. y2_show: false, //是否展示右侧的2号轴
  1082. yAxis1_bar: null, //数据1
  1083. yAxis1_bar_Name: "", //数据1的名称
  1084. yAxis1_bar_index: 0,
  1085. yAxis2_bar: null, //数据2
  1086. yAxis2_bar_Name: "", //数据1的名称
  1087. yAxis2_bar_index: 0,
  1088. yAxis2_line: null,
  1089. yAxis2_line_Name: "",
  1090. yAxis2_line_Index: 0,
  1091. yAxis3_line: null,
  1092. yAxis3_line_Name: "",
  1093. yAxis3_line_Index: 0,
  1094. };
  1095. AllData.refresh1++;
  1096. AllData.TjData1 = null;
  1097. AllData.TjData1Unit = null;
  1098. AllData.chartData3 = {
  1099. xAxis: [], //X轴数据
  1100. y1_Unit: "", //Y轴单位
  1101. y2_Unit: "", //2号Y轴单位
  1102. y2_show: false, //是否展示右侧的2号轴
  1103. yAxis1_bar: null, //数据1
  1104. yAxis1_bar_Name: "", //数据1的名称
  1105. yAxis1_bar_index: 0,
  1106. yAxis2_bar: null, //数据2
  1107. yAxis2_bar_Name: "", //数据1的名称
  1108. yAxis2_bar_index: 0,
  1109. yAxis2_line: null,
  1110. yAxis2_line_Name: "",
  1111. yAxis2_line_Index: 0,
  1112. yAxis3_line: null,
  1113. yAxis3_line_Name: "",
  1114. yAxis3_line_Index: 0,
  1115. };
  1116. AllData.refresh3++;
  1117. AllData.TjData3 = null;
  1118. AllData.TjData3Unit = null;
  1119. AllData.chartData2 = {
  1120. xAxis: [],
  1121. yAxis: [],
  1122. yAxis2: [],
  1123. yAxis_Name: "",
  1124. yAxis2_Name: "",
  1125. y1_Unit: "km",
  1126. };
  1127. AllData.refresh2++;
  1128. AllData.TjData2 = null;
  1129. AllData.TjData2Unit = null;
  1130. };
  1131.  
  1132. // 打开公共弹窗
  1133. const OpenGongGongDialog = () => {
  1134. // debugger;
  1135. let params = {
  1136. stName: AllData.ClicksiteName,
  1137. dataCode: "",
  1138. stType: AllData.RightShowType,
  1139. stCode: AllData.RightStCode,
  1140. wellCode: "",
  1141. id: AllData.RightShowID,
  1142. geometry: AllData.RightGeometry,
  1143. dataId: "",
  1144. RefName: "jiancefenxiGWFX",
  1145. };
  1146. localStorage.setItem("ReturnPSTX", "On"); //On打开公共弹窗 off不打开公共弹窗 默认为On
  1147. bus.emit("DynamicBus", params);
  1148. };
  1149. onMounted(() => {
  1150. let initeGLTimer = setInterval(() => {
  1151. if (!newfiberMap) return;
  1152. bus.on("FenQuClick", FenQuClick);
  1153. getData1();
  1154. getData2();
  1155. getData3();
  1156. clearInterval(initeGLTimer);
  1157. }, 100);
  1158. });
  1159.  
  1160. onBeforeUnmount(() => {
  1161. bus.off("FenQuClick");
  1162. });
  1163. </script>
  1164.  
  1165. <style lang="scss" scoped>
  1166. .WSIndex {
  1167. .CrumbesTitle {
  1168. width: 100%;
  1169. height: 44px;
  1170. background: url("@/assets/images/pictureOnMap/eachBgc.png") no-repeat center;
  1171. background-size: 100% 100%;
  1172. box-sizing: border-box;
  1173. padding-left: 40px;
  1174. display: flex;
  1175. flex-direction: row;
  1176. flex-wrap: nowrap;
  1177. justify-content: flex-start;
  1178. align-items: center;
  1179. .crumbs {
  1180. font-weight: bold;
  1181. font-size: 20px;
  1182. color: #ffffff;
  1183. cursor: pointer;
  1184. &:hover {
  1185. color: #2291e1;
  1186. }
  1187. }
  1188. .crumbs2 {
  1189. font-weight: bold;
  1190. font-size: 20px;
  1191. color: #ffffff;
  1192. overflow: hidden;
  1193. text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
  1194. white-space: nowrap; /* 限制不允许换行 */
  1195. cursor: pointer;
  1196. }
  1197. }
  1198. .modular1,
  1199. .modular2,
  1200. .modular3 {
  1201. width: 100%;
  1202. height: calc((100% - 50px) / 3);
  1203.  
  1204. .modularBody {
  1205. width: 100%;
  1206. height: calc(100% - 50px);
  1207. }
  1208. }
  1209.  
  1210. .modular1_right {
  1211. width: 100%;
  1212. height: calc(100% - 584px);
  1213. }
  1214. .modular2_right {
  1215. width: 100%;
  1216. height: 200px;
  1217. .modularBody {
  1218. width: 100%;
  1219. height: calc(100% - 50px);
  1220. display: flex;
  1221. flex-direction: row;
  1222. flex-wrap: nowrap;
  1223. justify-content: space-evenly;
  1224. align-items: center;
  1225.  
  1226. .SLList {
  1227. display: inline-block;
  1228. width: 33.33%;
  1229. height: 110px;
  1230. box-sizing: border-box;
  1231. padding: 15px 0;
  1232. background-image: url("@/assets/images/pictureOnMap/SLFX.png");
  1233. background-repeat: no-repeat;
  1234. background-size: contain;
  1235.  
  1236. .SlList1P {
  1237. width: 100%;
  1238. height: 40px;
  1239. line-height: 40px;
  1240. text-align: center;
  1241. overflow: hidden;
  1242. text-overflow: ellipsis;
  1243. white-space: nowrap;
  1244. .SlListNum {
  1245. font-family: DINPro;
  1246. font-weight: bold;
  1247. font-size: 22px;
  1248. color: #00fcff;
  1249. }
  1250. .SlListUnit {
  1251. font-family: Source Han Sans CN;
  1252. font-weight: 400;
  1253. font-size: 16px;
  1254. color: #ccdfff;
  1255. }
  1256. }
  1257. .SlList2P {
  1258. font-family: Source Han Sans CN;
  1259. font-weight: 400;
  1260. font-size: 16px;
  1261. color: #ffffff;
  1262. height: 40px;
  1263. line-height: 40px;
  1264. text-align: center;
  1265. }
  1266. }
  1267. }
  1268. }
  1269. .modular3_right {
  1270. width: 100%;
  1271. height: 340px;
  1272. .modularBody {
  1273. width: 100%;
  1274. height: calc(100% - 50px);
  1275.  
  1276. .ListInfo100 {
  1277. width: 100%;
  1278. height: 38px;
  1279. float: left;
  1280. margin-top: 10px;
  1281. display: flex;
  1282. flex-direction: row;
  1283. flex-wrap: nowrap;
  1284. align-items: center;
  1285. justify-content: flex-start;
  1286. }
  1287. .ListInfo50 {
  1288. width: 50%;
  1289. height: 38px;
  1290. float: left;
  1291. margin-top: 10px;
  1292. display: flex;
  1293. flex-direction: row;
  1294. flex-wrap: nowrap;
  1295. align-items: center;
  1296. justify-content: flex-start;
  1297. }
  1298.  
  1299. .ListInfo_label {
  1300. width: 75px;
  1301. height: 38px;
  1302. line-height: 38px;
  1303. text-align: center;
  1304. font-family: Source Han Sans CN;
  1305. font-weight: bold;
  1306. font-size: 14px;
  1307. color: #ccdfff;
  1308. }
  1309. .ListInfo_value {
  1310. width: calc(100% - 75px);
  1311. height: 38px;
  1312. line-height: 30px;
  1313. background: #0d2359;
  1314. border-radius: 6px;
  1315. border: 1px solid #0b9bff;
  1316. box-sizing: border-box;
  1317. padding: 5px 5px 5px 10px;
  1318. font-family: Source Han Sans CN;
  1319. font-weight: 400;
  1320. font-size: 14px;
  1321. color: #00fcff;
  1322. }
  1323. }
  1324. }
  1325.  
  1326. .modularRight2 {
  1327. width: 100%;
  1328. height: calc(100% - 50px);
  1329. overflow: auto;
  1330. background: #0d2359;
  1331. }
  1332. }
  1333. </style>