Newer
Older
DH_Apicture / src / views / pictureOnMap / page / MonitoringAnalysis / index.vue
@wudi wudi on 3 Dec 42 KB 1
@zhangqy
first commit
zhangqy authed on 29 Nov
@zhangqy
对接
zhangqy authed on 30 Nov
@zhangqy
增加其它类型的本底数据弹窗
zhangqy authed on 29 Nov
@zhangqy
first commit
zhangqy authed on 29 Nov
@zhangqy
阶段性提交
zhangqy authed on 30 Nov
@zhangqy
弹窗联动
zhangqy authed on 29 Nov
@zhangqy
阶段性提交
zhangqy authed on 30 Nov
@zhangqy
first commit
zhangqy authed on 29 Nov
@zhangqy
增加其它类型的本底数据弹窗
zhangqy authed on 29 Nov
@zhangqy
first commit
zhangqy authed on 29 Nov
@zhangqy
阶段性提交
zhangqy authed on 30 Nov
@zhangqy
first commit
zhangqy authed on 29 Nov
@wudi
1
wudi authed on 3 Dec
@zhangqy
first commit
zhangqy authed on 29 Nov
@zhangqy
阶段性提交
zhangqy authed on 30 Nov
@zhangqy
对接
zhangqy authed on 30 Nov
@zhangqy
阶段性提交
zhangqy authed on 30 Nov
@zhangqy
first commit
zhangqy authed on 29 Nov
@zhangqy
测试代码提交
zhangqy authed on 29 Nov
@zhangqy
first commit
zhangqy authed on 29 Nov
@zhangqy
对接
zhangqy authed on 30 Nov
@zhangqy
first commit
zhangqy authed on 29 Nov
@zhangqy
对接
zhangqy authed on 30 Nov
@zhangqy
first commit
zhangqy authed on 29 Nov
@zhangqy
增加其它类型的本底数据弹窗
zhangqy authed on 29 Nov
@zhangqy
first commit
zhangqy authed on 29 Nov
@zhangqy
测试代码提交
zhangqy authed on 29 Nov
@zhangqy
first commit
zhangqy authed on 29 Nov
@wudi
1
wudi authed on 29 Nov
@zhangqy
first commit
zhangqy authed on 29 Nov
  1. <template>
  2. <!-- 监测分析 -->
  3. <div class="MonitoringAnalysis">
  4. <!-- 左侧echarts -->
  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="modular0">
  22. <div class="modularBtnBox">
  23. <div
  24. class="modularBtn"
  25. :class="[AllData.ModularBtnActiveID == 1 ? 'modularBtnActive' : '']"
  26. @click="modularBtn(1)"
  27. >
  28. 本底缺陷
  29. </div>
  30. <div
  31. class="modularBtn"
  32. :class="[AllData.ModularBtnActiveID == 2 ? 'modularBtnActive' : '']"
  33. @click="modularBtn(2)"
  34. >
  35. 风险分析
  36. </div>
  37. </div>
  38. <div class="modularTimerBox" v-show="AllData.ModularBtnActiveID == 2">
  39. <!-- 日期和时间选择: -->
  40. <span class="modularTimerBoxLabel">分析时间: </span>
  41. <DateSelect
  42. style="width: 200px"
  43. v-model:dateTime="AllData.Timers"
  44. :format="'YYYY-MM-DD'"
  45. :valueFormat="'YYYY-MM-DD'"
  46. @change="changeTime"
  47. :dateType="'daterange'"
  48. :rangeSeparator="'到'"
  49. />
  50. </div>
  51. </div>
  52. <div class="modular1" v-if="AllData.ModularBtnActiveID == 1">
  53. <div class="leve2Title">管网坡度</div>
  54. <div class="modularBody">
  55. <MonBarCharts
  56. :data="AllData.chartData1"
  57. :refresh="AllData.refresh1"
  58. :ClickData="AllData.ClickData1"
  59. />
  60. </div>
  61. </div>
  62. <div class="modular2" v-if="AllData.ModularBtnActiveID == 1">
  63. <div class="leve2Title">大管套小管</div>
  64. <div class="modularBody">
  65. <MonBarChartsLeft
  66. :data="AllData.chartData2"
  67. :refresh="AllData.refresh2"
  68. :ClickData="AllData.ClickData2"
  69. ></MonBarChartsLeft>
  70. </div>
  71. </div>
  72. <div class="modular3" v-if="AllData.ModularBtnActiveID == 1">
  73. <div class="leve2Title">管网混接</div>
  74. <div class="modularBody">
  75. <MonBarCharts
  76. :data="AllData.chartData3"
  77. :refresh="AllData.refresh3"
  78. :ClickData="AllData.ClickData3"
  79. />
  80. </div>
  81. </div>
  82.  
  83. <div class="modular1" v-if="AllData.ModularBtnActiveID == 2">
  84. <div class="leve2Title">
  85. {{ AllData.TypeID == "sewage" ? "水质异常" : "管网风险" }}
  86. </div>
  87. <div class="modularBody">
  88. <MonLineChartsLeft
  89. v-if="AllData.TypeID == 'sewage'"
  90. :data="AllData.chartData4"
  91. :refresh="AllData.refresh4"
  92. :ClickData="AllData.ClickData4"
  93. />
  94. <MonBarCharts
  95. v-if="AllData.TypeID == 'rain'"
  96. :data="AllData.chartData7"
  97. :refresh="AllData.refresh7"
  98. :ClickData="AllData.ClickData7"
  99. />
  100. </div>
  101. </div>
  102. <div class="modular2" v-if="AllData.ModularBtnActiveID == 2">
  103. <div class="leve2Title">
  104. {{ AllData.TypeID == "sewage" ? "外水注入分析" : "地下水渗入分析" }}
  105. </div>
  106. <div class="modularBody">
  107. <MonBarChartsLeft2
  108. v-if="AllData.TypeID == 'sewage'"
  109. :echartData="AllData.chartData5"
  110. :refresh="AllData.refresh5"
  111. :ClickData="AllData.ClickData5"
  112. ></MonBarChartsLeft2>
  113. <MonBarChartsLeft
  114. v-if="AllData.TypeID == 'rain'"
  115. :data="AllData.chartData8"
  116. :refresh="AllData.refresh8"
  117. :ClickData="AllData.ClickData8"
  118. ></MonBarChartsLeft>
  119. </div>
  120. </div>
  121. <div class="modular3" v-if="AllData.ModularBtnActiveID == 2">
  122. <div class="leve2Title">
  123. {{ AllData.TypeID == "sewage" ? "淤堵风险分析" : "污水注入分析" }}
  124. </div>
  125. <div class="modularBody">
  126. <div class="FontText" v-if="AllData.TypeID == 'sewage'">
  127. 低流速:0.6m/s,超低流速0.4m/s
  128. </div>
  129.  
  130. <MonBarChartsYDFX
  131. :data="AllData.chartData6"
  132. :refresh="AllData.refresh6"
  133. :ClickData="AllData.ClickData6"
  134. />
  135. </div>
  136. </div></div
  137. ></Transition>
  138.  
  139. <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
  140. <!-- 中间的污水/雨水切换 -->
  141. <div class="TypeChangeBox">
  142. <div
  143. class="TypeBtn"
  144. v-for="(item, index) in AllData.yw_type"
  145. :class="[AllData.TypeID == item.key ? 'TypeBtnCheck' : '']"
  146. @click="TypeClick(item)"
  147. >
  148. <span class="TypenName">{{ item.name }}</span>
  149. </div>
  150. </div>
  151.  
  152. <!-- 专题图专用弹窗 -->
  153. <el-dialog
  154. v-model="dialogConfig.visible"
  155. style="height: 830px; width: 1200px"
  156. :destroy-on-close="true"
  157. :draggable="true"
  158. title="详情"
  159. class="JCFXDialog"
  160. :z-index="10"
  161. >
  162. <el-tabs v-model="dialogConfig.activeName" @tab-click="handleClick">
  163. <!-- 雨污共有 -->
  164. <el-tab-pane label="管网坡度" name="gwpd">
  165. <Gwpd
  166. :TypeID="AllData.TypeID"
  167. :FenQuData="AllData.TitleName"
  168. :lastFQName="dialogConfig.lastFQName"
  169. v-if="dialogConfig.activeName == 'gwpd'"
  170. ></Gwpd>
  171. </el-tab-pane>
  172. <el-tab-pane label="大管套小管" name="dgtxg">
  173. <Dgtxg
  174. :TypeID="AllData.TypeID"
  175. :FenQuData="AllData.TitleName"
  176. :lastFQName="dialogConfig.lastFQName"
  177. v-if="dialogConfig.activeName == 'dgtxg'"
  178. ></Dgtxg>
  179. </el-tab-pane>
  180. <el-tab-pane label="管网混接" name="gwhj">
  181. <Gwhj
  182. :TypeID="AllData.TypeID"
  183. :FenQuData="AllData.TitleName"
  184. :lastFQName="dialogConfig.lastFQName"
  185. v-if="dialogConfig.activeName == 'gwhj'"
  186. ></Gwhj>
  187. </el-tab-pane>
  188. <el-tab-pane label="其它缺陷" name="qt">
  189. <Qt
  190. :TypeID="AllData.TypeID"
  191. :FenQuData="AllData.TitleName"
  192. :lastFQName="dialogConfig.lastFQName"
  193. v-if="dialogConfig.activeName == 'qt'"
  194. ></Qt>
  195. </el-tab-pane>
  196. <!-- 污水特有 -->
  197. <el-tab-pane label="水质异常" name="szyc" v-if="AllData.TypeID == 'sewage'">
  198. <Szyc
  199. :TypeID="AllData.TypeID"
  200. :FenQuData="AllData.TitleName"
  201. :lastFQName="dialogConfig.lastFQName"
  202. :TimerData="AllData.Timers"
  203. v-if="dialogConfig.activeName == 'szyc'"
  204. ></Szyc>
  205. </el-tab-pane>
  206. <el-tab-pane label="外水注入" name="wszr" v-if="AllData.TypeID == 'sewage'">
  207. <Wszr
  208. :TypeID="AllData.TypeID"
  209. :FenQuData="AllData.TitleName"
  210. :lastFQName="dialogConfig.lastFQName"
  211. :TimerData="AllData.Timers"
  212. v-if="dialogConfig.activeName == 'wszr'"
  213. ></Wszr>
  214. </el-tab-pane>
  215. <el-tab-pane label="淤堵风险" name="ydfx" v-if="AllData.TypeID == 'sewage'">
  216. <Ydfx
  217. :TypeID="AllData.TypeID"
  218. :FenQuData="AllData.TitleName"
  219. :lastFQName="dialogConfig.lastFQName"
  220. :TimerData="AllData.Timers"
  221. v-if="dialogConfig.activeName == 'ydfx'"
  222. ></Ydfx>
  223. </el-tab-pane>
  224. <!-- 雨水特有 -->
  225. <el-tab-pane label="溢流分析" name="gwfx" v-if="AllData.TypeID == 'rain'">
  226. <Gwfx
  227. :TypeID="AllData.TypeID"
  228. :FenQuData="AllData.TitleName"
  229. :lastFQName="dialogConfig.lastFQName"
  230. :TimerData="AllData.Timers"
  231. v-if="dialogConfig.activeName == 'gwfx'"
  232. ></Gwfx>
  233. </el-tab-pane>
  234. <el-tab-pane label="地下水入渗" name="dxssr" v-if="AllData.TypeID == 'rain'">
  235. <Dxssr
  236. :TypeID="AllData.TypeID"
  237. :FenQuData="AllData.TitleName"
  238. :lastFQName="dialogConfig.lastFQName"
  239. :TimerData="AllData.Timers"
  240. v-if="dialogConfig.activeName == 'dxssr'"
  241. ></Dxssr>
  242. </el-tab-pane>
  243. <el-tab-pane label="污水注入" name="ydfx" v-if="AllData.TypeID == 'rain'">
  244. <Ydfx
  245. :TypeID="AllData.TypeID"
  246. :FenQuData="AllData.TitleName"
  247. :lastFQName="dialogConfig.lastFQName"
  248. :TimerData="AllData.Timers"
  249. v-if="dialogConfig.activeName == 'ydfx'"
  250. ></Ydfx>
  251. </el-tab-pane>
  252. <!-- <el-tab-pane label="测试_分析弹窗" name="ylfxJCFX">
  253. <ylfxJCFX v-if="dialogConfig.activeName == 'ylfxJCFX'"></ylfxJCFX>
  254. </el-tab-pane> -->
  255. </el-tabs>
  256. </el-dialog>
  257. </div>
  258. </template>
  259. <script setup name="MonitoringAnalysis">
  260. import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
  261. import moment from "moment";
  262. import MonBarCharts from "./components/MonBarCharts.vue";
  263. import MonBarChartsYDFX from "./components/MonBarCharts_YDFX.vue"; //淤堵风险专项charts
  264. import MonBarChartsLeft from "./components/MonBarChartsLeft.vue";
  265. import MonBarChartsLeft2 from "./components/MonBarChartsLeft2.vue";
  266. import bus from "@/bus";
  267. import MonLineChartsLeft from "./components/MonLineChartsLeft.vue";
  268. import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
  269. // 引入弹窗组件
  270. import Gwpd from "./tab_components/gwpd.vue";
  271. import Dgtxg from "./tab_components/dgtxg.vue";
  272. import Gwhj from "./tab_components/gwhj.vue";
  273. import Qt from "./tab_components/qt.vue";
  274. import Szyc from "./tab_components/szyc.vue";
  275. import Wszr from "./tab_components/wszr.vue";
  276. import Ydfx from "./tab_components/ydfx.vue";
  277. import Gwfx from "./tab_components/gwfx.vue";
  278. import Dxssr from "./tab_components/dxssr.vue";
  279.  
  280. // 测试
  281. // import ylfxJCFX from "./../components/DialogTabs/component/ylfxJCFX.vue";
  282. // 面板控制组件
  283. import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
  284. const showPanel = ref(false); //面板展开收起
  285. const PanelChange = (val) => {
  286. showPanel.value = val;
  287. };
  288.  
  289. const dialogConfig = reactive({
  290. visible: false,
  291. activeName: "",
  292. lastFQName: "", //点击的echarts图形数据名称
  293. });
  294. const AllData = reactive({
  295. regionGrade: "one", //分区级别(one:一级 || two:二级 || three:三级 || four:四级)
  296. regionName: "", //分区名称
  297. yw_type: [
  298. { name: "污水体系", value: "污水分区", key: "sewage" },
  299. { name: "雨水体系", value: "雨水分区,雨水系统流向,雨水系统流向1,rain_water_pump_station_info,water_gate_info,storage_tank_info", key: "rain" },
  300. ],
  301. TitleName: [
  302. {
  303. abbreviation: "一级分区", //分区缩写-动态
  304. id: "", //分区信息-动态
  305. grade: "one", //分区层级-静态(查询数据用)
  306. sort: 0, //面包屑的顺序
  307. Name: "", //全称
  308. },
  309. {
  310. abbreviation: "", //分区缩写-动态
  311. id: "", //分区信息-动态
  312. grade: "two", //分区层级-静态
  313. sort: 1, //面包屑的顺序
  314. Name: "", //全称
  315. },
  316. {
  317. abbreviation: "", //分区缩写-动态
  318. id: "", //分区信息-动态
  319. grade: "three", //分区层级-静态
  320. sort: 2, //面包屑的顺序
  321. Name: "", //全称
  322. },
  323. {
  324. abbreviation: "", //分区缩写-动态
  325. id: "", //分区信息-动态
  326. grade: "four", //分区层级-静态
  327. sort: 3, //面包屑的顺序
  328. Name: "", //全称
  329. },
  330. {
  331. abbreviation: "", //分区缩写-动态
  332. id: "", //分区信息-动态
  333. grade: "five", //分区层级-静态
  334. sort: 4, //面包屑的顺序
  335. Name: "", //全称
  336. },
  337. ],
  338. ModularBtnActiveID: 1,
  339. Timers: [
  340. // "2024-07-01",
  341. // "2024-07-02",
  342. // moment().subtract(3, "day").format("YYYY-MM-DD"),
  343. moment().format("YYYY-MM-DD"),
  344. moment().format("YYYY-MM-DD"),
  345. ],
  346. // 污水/雨水切换 sewage / rain
  347. TypeID: "sewage",
  348. // 管网坡度
  349. chartData1: {
  350. // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
  351. // yAxis: ["870", "568", "700", "600", "276", "280"],
  352. // yAxis_Name: "复勘数",
  353. // yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
  354. // yAxis2_Name: "片区管网",
  355. // yAxis3_line: ["1000", "600", "680", "520", "160", "180"],
  356. // yAxis3_line_Name: "报告数",
  357. // yAxis4_line: null,
  358. // yAxis4_line_Name: "",
  359. xAxis: [],
  360. yAxis: [],
  361. yAxis_Name: "",
  362. yAxis2: [],
  363. yAxis2_Name: "",
  364. yAxis3_line: [],
  365. yAxis3_line_Name: "",
  366. yAxis4_line: null,
  367. yAxis4_line_Name: "",
  368. },
  369. refresh1: 0,
  370. ClickData1: "gwpd",
  371. // 大管套小管
  372. chartData2: {
  373. xAxis: [],
  374. yAxis: [],
  375. yAxis2: [],
  376. yAxis_Name: "",
  377. yAxis2_Name: "",
  378. // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
  379. // yAxis: ["870", "568", "700", "600", "276", "280"],
  380. // yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
  381. // yAxis_Name: "复勘数",
  382. // yAxis2_Name: "勘测数",
  383. },
  384. refresh2: 0,
  385. ClickData2: "dgtxg",
  386.  
  387. // 管网混接
  388. chartData3: {
  389. xAxis: [],
  390. yAxis: [],
  391. yAxis_Name: "",
  392. yAxis2: [],
  393. yAxis2_Name: "",
  394. yAxis3_line: [],
  395. yAxis3_line_Name: "",
  396. yAxis4_line: null,
  397. yAxis4_line_Name: "",
  398. // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
  399. // yAxis: ["870", "568", "700", "600", "276", "280"],
  400. // yAxis_Name: "复勘数",
  401. // yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
  402. // yAxis2_Name: "片区管网",
  403. // yAxis3_line: ["1000", "600", "680", "520", "160", "180"],
  404. // yAxis3_line_Name: "报告数",
  405. // yAxis4_line: null,
  406. // yAxis4_line_Name: "",
  407. },
  408. refresh3: 0,
  409. ClickData3: "gwhj",
  410. // 水质异常
  411. chartData4: {
  412. xAxis: [],
  413. yAxis: [],
  414. yAxis2: [],
  415. yAxis_Name: "",
  416. yAxis2_Name: "",
  417. // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
  418. // yAxis: ["160", "200", "180", "190", "200", "210"],
  419. // yAxis_Name: "进口水质",
  420. // yAxis2: ["120", "150", "130", "120", "130", "140"],
  421. // yAxis2_Name: "出口水质",
  422. },
  423. refresh4: 0,
  424. ClickData4: "szyc",
  425. // 外水注入分析
  426. chartData5: {
  427. xData: [],
  428. data1: [],
  429. data2: [],
  430. // xData: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
  431. // data1: ["870", "568", "700", "600", "276", "280"],
  432. // data2: ["1870", "1568", "1700", "1600", "1276", "1276"],
  433. },
  434. refresh5: 0,
  435. ClickData5: "wszr",
  436. // 淤堵风险分析
  437. chartData6: {
  438. xAxis: [],
  439. yAxis: [],
  440. yAxis_Name: "",
  441. yAxis2: [],
  442. yAxis2_Name: "",
  443. yAxis3_line: [],
  444. yAxis3_line_Name: "",
  445. // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
  446. // yAxis: ["6", "6", "7", "4", "4", "4"],
  447. // yAxis_Name: "风险点位数",
  448. // yAxis2: ["11", "11", "11", "10", "9", "8"],
  449. // yAxis2_Name: "点位数",
  450. // yAxis3_line: ["0.5", "0.7", "0.6", "0.55", "0.7", "0.7"],
  451. // yAxis3_line_Name: "流速",
  452. },
  453. refresh6: 0,
  454. ClickData6: "ydfx",
  455. // 管网风险
  456. chartData7: {
  457. xAxis: [],
  458. yAxis: [],
  459. yAxis_Name: "",
  460. yAxis2: [],
  461. yAxis2_Name: "",
  462. yAxis3_line: [],
  463. yAxis3_line_Name: "",
  464. yAxis4_line: null,
  465. yAxis4_line_Name: "",
  466. // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
  467. // yAxis: ["870", "568", "700", "600", "276", "280"],
  468. // yAxis_Name: "复勘数",
  469. // yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
  470. // yAxis2_Name: "片区管网",
  471. // yAxis3_line: ["1000", "600", "680", "520", "160", "180"],
  472. // yAxis3_line_Name: "报告数",
  473. // yAxis4_line: null,
  474. // yAxis4_line_Name: "",
  475. },
  476. refresh7: 0,
  477. ClickData7: "gwfx",
  478. // 地下水渗入分析
  479. chartData8: {
  480. xAxis: [],
  481. yAxis: [],
  482. yAxis2: [],
  483. yAxis_Name: "",
  484. yAxis2_Name: "",
  485. // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
  486. // yAxis: [],
  487. // yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
  488. // yAxis_Name: "",
  489. // yAxis2_Name: "问题数",
  490. },
  491. refresh8: 0,
  492. ClickData8: "dxssr",
  493. });
  494. // 污水 / 雨水 切换
  495. const TypeClick = (item) => {
  496. let type = item.key;
  497. bus.emit("clearTemporaryData");
  498. AllData.yw_type.forEach((i) =>
  499. i.value.split(",").forEach((o) => operationLayer(o, false))
  500. );
  501. item.value.split(",").forEach((o) => operationLayer(o, true));
  502. AllData.regionGrade = "one";
  503. AllData.regionName = "";
  504. newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  505. // 切换时回到默认一级分区
  506. AllData.TypeID = type;
  507. if (AllData.TypeID == "sewage") {
  508. // 污水
  509. AllData.TitleName[0].abbreviation = "一级分区";
  510. AllData.TitleName[0].id = ""; //分区信息-动态
  511. AllData.TitleName[0].grade = "one"; //分区层级-静态
  512. AllData.TitleName[0].sort = 0; //面包屑的顺序
  513. AllData.TitleName[0].Name = []; //面包屑的顺序
  514. AllData.Timers = ["2024-07-01", "2024-07-07"];
  515. // 将2,3,4级分区清空
  516. AllData.TitleName[1] = {
  517. abbreviation: "",
  518. Name: "",
  519. id: "",
  520. grade: "two",
  521. sort: 1,
  522. };
  523. AllData.TitleName[2] = {
  524. abbreviation: "",
  525. Name: "",
  526. id: "",
  527. grade: "three",
  528. sort: 2,
  529. };
  530. AllData.TitleName[3] = {
  531. abbreviation: "",
  532. Name: "",
  533. id: "",
  534. grade: "four",
  535. sort: 3,
  536. };
  537. AllData.TitleName[4] = {
  538. abbreviation: "",
  539. Name: "",
  540. id: "",
  541. grade: "five",
  542. sort: 4,
  543. };
  544. } else {
  545. // 雨水
  546. AllData.TitleName[0].abbreviation = "一级流域";
  547. AllData.TitleName[0].id = ""; //分区信息-动态
  548. AllData.TitleName[0].grade = "one"; //分区层级-静态
  549. AllData.TitleName[0].sort = 0; //面包屑的顺序
  550. AllData.TitleName[0].Name = []; //面包屑的顺序
  551. AllData.Timers = [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")];
  552. // 将2,3,4级分区清空
  553. AllData.TitleName[1] = {
  554. abbreviation: "",
  555. Name: "",
  556. id: "",
  557. grade: "two",
  558. sort: 1,
  559. };
  560. AllData.TitleName[2] = {
  561. abbreviation: "",
  562. Name: "",
  563. id: "",
  564. grade: "three",
  565. sort: 2,
  566. };
  567. AllData.TitleName[3] = {
  568. abbreviation: "",
  569. Name: "",
  570. id: "",
  571. grade: "four",
  572. sort: 3,
  573. };
  574. AllData.TitleName[4] = {
  575. abbreviation: "",
  576. Name: "",
  577. id: "",
  578. grade: "five",
  579. sort: 4,
  580. };
  581. }
  582.  
  583. // 切换时进行数据请求
  584. if (AllData.ModularBtnActiveID == 1) {
  585. // 本底缺陷
  586. GetData("slope");
  587. GetData("big_cover_small");
  588. GetData("mix");
  589. } else {
  590. // 风险分析
  591. GetData2();
  592. }
  593. };
  594. // 分区点击切换
  595. const FenQuClick = (properties) => {
  596. console.log("FenQuClick", properties);
  597. if (!!!properties.pid) return;
  598. // 请求面包屑的数据
  599. let params = {
  600. regionType: AllData.TypeID,
  601. id: Number(properties.pid),
  602. };
  603. MonitorAPI.lineGrade(params).then((res) => {
  604. if (res && res.code == 200) {
  605. // 默认设置基础的分区
  606. if (AllData.TypeID == "sewage") {
  607. // 污水
  608. AllData.TitleName[0].abbreviation = "一级分区";
  609. AllData.TitleName[0].id = ""; //分区信息-动态
  610. AllData.TitleName[0].grade = "one"; //分区层级-静态
  611. AllData.TitleName[0].sort = 0; //面包屑的顺序
  612. AllData.TitleName[0].Name = ""; //全称
  613. } else {
  614. // 雨水
  615. AllData.TitleName[0].abbreviation = "一级流域";
  616. AllData.TitleName[0].id = ""; //分区信息-动态
  617. AllData.TitleName[0].grade = "one"; //分区层级-静态
  618. AllData.TitleName[0].sort = 0; //面包屑的顺序
  619. AllData.TitleName[0].Name = ""; //全称
  620. }
  621. // 设置1 2 3 4 级分区
  622.  
  623. clearMianBaoData();
  624. if (res.data.length == 1) {
  625. // 只有总分区/一级分区
  626. res.data.forEach((element) => {
  627. if (element.grade == "one") {
  628. AllData.TitleName[1] = {
  629. abbreviation: element.shortName,
  630. id: element.id,
  631. grade: "two",
  632. sort: 1,
  633. Name: element.name,
  634. };
  635. }
  636. });
  637. } else if (res.data.length == 2) {
  638. // 只有总分区/一级分区/二级分区
  639.  
  640. res.data.forEach((element) => {
  641. if (element.grade == "one") {
  642. AllData.TitleName[1] = {
  643. abbreviation: element.shortName,
  644. id: element.id,
  645. grade: "two",
  646. sort: 1,
  647. Name: element.name,
  648. };
  649. }
  650. if (element.grade == "two") {
  651. AllData.TitleName[2] = {
  652. abbreviation: element.shortName,
  653. id: element.id,
  654. grade: "three",
  655. sort: 2,
  656. Name: element.name,
  657. };
  658. }
  659. });
  660. } else if (res.data.length == 3) {
  661. // 只有总分区/一级分区/二级分区/三级分区
  662.  
  663. res.data.forEach((element) => {
  664. if (element.grade == "one") {
  665. AllData.TitleName[1] = {
  666. abbreviation: element.shortName,
  667. id: element.id,
  668. grade: "two",
  669. sort: 1,
  670. Name: element.name,
  671. };
  672. }
  673. if (element.grade == "two") {
  674. AllData.TitleName[2] = {
  675. abbreviation: element.shortName,
  676. id: element.id,
  677. grade: "three",
  678. sort: 2,
  679. Name: element.name,
  680. };
  681. }
  682. if (element.grade == "three") {
  683. AllData.TitleName[3] = {
  684. abbreviation: element.shortName,
  685. id: element.id,
  686. grade: "four",
  687. sort: 3,
  688. Name: element.name,
  689. };
  690. }
  691. });
  692. } else if (res.data.length == 4) {
  693. // 只有总分区/一级分区/二级分区/三级分区/四级分区
  694.  
  695. res.data.forEach((element) => {
  696. if (element.grade == "one") {
  697. AllData.TitleName[1] = {
  698. abbreviation: element.shortName,
  699. id: element.id,
  700. grade: "two",
  701. sort: 1,
  702. Name: element.name,
  703. };
  704. }
  705. if (element.grade == "two") {
  706. AllData.TitleName[2] = {
  707. abbreviation: element.shortName,
  708. id: element.id,
  709. grade: "three",
  710. sort: 2,
  711. Name: element.name,
  712. };
  713. }
  714. if (element.grade == "three") {
  715. AllData.TitleName[3] = {
  716. abbreviation: element.shortName,
  717. id: element.id,
  718. grade: "four",
  719. sort: 3,
  720. Name: element.name,
  721. };
  722. }
  723. if (element.grade == "four") {
  724. AllData.TitleName[4] = {
  725. abbreviation: element.shortName,
  726. id: element.id,
  727. grade: "five",
  728. sort: 4,
  729. Name: element.name,
  730. };
  731. }
  732. });
  733. }
  734. }
  735. // 赋值需要进行echarts数据请求的数据
  736. AllData.regionGrade =
  737. res.data.length == 1
  738. ? "two"
  739. : res.data.length == 2
  740. ? "three"
  741. : res.data.length == 3
  742. ? "four"
  743. : "five"; //分区级别(one:一级 || two:二级 || three:三级 || four:四级)
  744. AllData.regionName = AllData.TitleName[res.data.length].Name;
  745. if (AllData.ModularBtnActiveID == 1) {
  746. // 本底缺陷
  747. GetData("slope");
  748. GetData("big_cover_small");
  749. GetData("mix");
  750. } else {
  751. // 风险分析
  752. GetData2();
  753. }
  754. });
  755. };
  756. // 顶部按钮点击切换
  757. const modularBtn = (num) => {
  758. AllData.ModularBtnActiveID = num;
  759. // AllData.regionGrade = "one";
  760. // AllData.regionName = "";
  761. // 切换时进行数据请求
  762. if (AllData.ModularBtnActiveID == 1) {
  763. // 本底缺陷
  764. GetData("slope");
  765. GetData("big_cover_small");
  766. GetData("mix");
  767. } else {
  768. // 风险分析
  769. GetData2();
  770. }
  771. };
  772. // 选择时间
  773. const changeTime = () => {
  774. console.log(AllData.Timers);
  775. GetData2();
  776. };
  777.  
  778. const events_params = {
  779. setHighlight: { key: "setHighlight" },
  780. setLayerVisible: { key: "setLayerVisible" },
  781. clearTemporaryData: { key: "clearTemporaryData" },
  782. };
  783. const operationLayer = (name, visible) => {
  784. const { setLayerVisible, setHighlight } = events_params;
  785. bus.emit(setLayerVisible.key, { layername: name, isCheck: visible });
  786. };
  787.  
  788. /**
  789. * 获取本底数据
  790. * queryType:查询类型:(slope:坡度 || big_cover_small:大管套小管 || mix:混接)
  791. */
  792. const GetData = (queryType) => {
  793. if (AllData.regionGrade == "five") return;
  794. if (AllData.regionGrade == "four" && AllData.TypeID == "rain") return;
  795. let params = {
  796. regionGrade: AllData.regionGrade,
  797. regionType: AllData.TypeID, //分区类型(sewage:污水 || rain:雨水)
  798. queryType: queryType,
  799. regionName: AllData.regionName,
  800. };
  801. // 根据不同类型进行清空操作
  802. clearEchartsData(queryType);
  803. MonitorAPI.pipelineBackgroundDefectAnalysis(params).then((res) => {
  804. if (res && res.code == 200) {
  805. // 根据不同类型进行赋值
  806. switch (queryType) {
  807. case "slope":
  808. AllData.chartData1.xAxis = res.data.regionNameList;
  809. AllData.chartData1.yAxis = res.data.reverseResurveyLengthList;
  810. AllData.chartData1.yAxis_Name = "复勘数";
  811. AllData.chartData1.yAxis2 = res.data.pipelineLengthList;
  812. AllData.chartData1.yAxis2_Name = "片区管网";
  813. AllData.chartData1.yAxis3_line = res.data.reverseReportLengthList;
  814. AllData.chartData1.yAxis3_line_Name = "报告数";
  815. AllData.chartData1.yAxis4_line = null;
  816. AllData.chartData1.yAxis4_line_Name = "";
  817. AllData.refresh1++;
  818. break;
  819. case "big_cover_small":
  820. AllData.chartData2.xAxis = res.data.regionNameList;
  821. AllData.chartData2.yAxis = res.data.bigCoverSmallResurveyCountList;
  822. AllData.chartData2.yAxis2 = res.data.bigCoverSmallSurveyCountList;
  823. AllData.chartData2.yAxis_Name = "复勘数";
  824. AllData.chartData2.yAxis2_Name = "勘测数";
  825. AllData.refresh2++;
  826. break;
  827. case "mix":
  828. AllData.chartData3.xAxis = res.data.regionNameList;
  829. AllData.chartData3.yAxis = res.data.mixResurveyLengthList;
  830. AllData.chartData3.yAxis_Name = "复勘数";
  831. AllData.chartData3.yAxis2 = res.data.pipelineLengthList;
  832. AllData.chartData3.yAxis2_Name = "片区管网";
  833. AllData.chartData3.yAxis3_line = res.data.mixReportLengthList;
  834. AllData.chartData3.yAxis3_line_Name = "报告数";
  835. AllData.chartData3.yAxis4_line = null;
  836. AllData.chartData3.yAxis4_line_Name = "";
  837. AllData.refresh3++;
  838. break;
  839. }
  840. }
  841. });
  842. };
  843.  
  844. /**
  845. * 获取风险分析
  846. * regionGrade:分区级别(one:一级 || two:二级 || three:三级 || four:四级)
  847. * regionName:分区名称
  848. */
  849. const GetData2 = () => {
  850. if (AllData.regionGrade == "five") return;
  851. if (AllData.regionGrade == "four" && AllData.TypeID == "rain") return;
  852. let params = {
  853. regionGrade: AllData.regionGrade,
  854. regionType: AllData.TypeID, //分区类型(sewage:污水 || rain:雨水)
  855. regionName: AllData.regionName,
  856. startTime: AllData.Timers[0],
  857. endTime: AllData.Timers[1],
  858. };
  859. // 清空
  860. clearEchartsData2();
  861. // 读取数据
  862. MonitorAPI.pipelineRiskAnalysis(params).then((res) => {
  863. if (res && res.code == 200) {
  864. if (AllData.TypeID == "sewage") {
  865. // 水质异常 - 污水
  866. AllData.chartData4.xAxis = res.data.regionNameList;
  867.  
  868. if (AllData.regionGrade != "four") {
  869. AllData.chartData4.yAxis = res.data.inletWaterQualityExceptionCountList;
  870. AllData.chartData4.yAxis_Name = "进口水质";
  871. }
  872. AllData.chartData4.yAxis2 = res.data.outletWaterQualityExceptionCountList;
  873. AllData.chartData4.yAxis2_Name = "出口水质";
  874. AllData.refresh4++;
  875. // 外水注入分析 - 污水
  876. AllData.chartData5.xData = res.data.regionNameList;
  877. AllData.chartData5.data1 = res.data.externalWaterInjectionNightCountList;
  878. AllData.chartData5.data2 = res.data.externalWaterInjectionDayCountList;
  879. AllData.refresh5++;
  880. // 淤堵风险分析 - 污水
  881. AllData.chartData6.xAxis = res.data.regionNameList;
  882. AllData.chartData6.yAxis = [];
  883. AllData.chartData6.yAxis_Name = "";
  884. AllData.chartData6.yAxis2 = res.data.pointCountList;
  885. AllData.chartData6.yAxis2_Name = "点位数";
  886. AllData.chartData6.yAxis3_line = res.data.siltRiskPointCountList;
  887. AllData.chartData6.yAxis3_line_Name = "风险点位数";
  888. AllData.refresh6++;
  889. } else {
  890. // 管网风险 - 雨水
  891. AllData.chartData7.xAxis = res.data.regionNameList;
  892. AllData.chartData7.yAxis = res.data.overFlowPointCountList;
  893. AllData.chartData7.yAxis_Name = "溢流风险点";
  894. AllData.chartData7.yAxis2 = res.data.pointCountList;
  895. AllData.chartData7.yAxis2_Name = "点位数";
  896. AllData.chartData7.yAxis3_line = res.data.fullPipePointCountList;
  897. AllData.chartData7.yAxis3_line_Name = "管网满管运行点";
  898. AllData.chartData7.yAxis4_line = null;
  899. AllData.chartData7.yAxis4_line_Name = "";
  900. AllData.refresh7++;
  901. // 地下水渗入分析 - 雨水
  902. AllData.chartData8.xAxis = res.data.regionNameList;
  903. AllData.chartData8.yAxis = [];
  904. AllData.chartData8.yAxis2 = res.data.groundwaterInflowPointCountList;
  905. AllData.chartData8.yAxis_Name = "";
  906. AllData.chartData8.yAxis2_Name = "问题数";
  907. AllData.refresh8++;
  908. // 污水注入分析 - 雨水
  909. AllData.chartData6.xAxis = res.data.regionNameList;
  910. AllData.chartData6.yAxis = [];
  911. AllData.chartData6.yAxis_Name = "";
  912. AllData.chartData6.yAxis2 = res.data.pointCountList;
  913. AllData.chartData6.yAxis2_Name = "点位数";
  914. AllData.chartData6.yAxis3_line = res.data.sewageInjectPointCountList;
  915. AllData.chartData6.yAxis3_line_Name = "风险点位数";
  916. AllData.refresh6++;
  917. }
  918. }
  919. });
  920. };
  921.  
  922. // 清除本底分析echarts的数据
  923. const clearEchartsData = (queryType) => {
  924. switch (queryType) {
  925. case "slope":
  926. AllData.chartData1.xAxis = [];
  927. AllData.chartData1.yAxis = [];
  928. AllData.chartData1.yAxis_Name = "";
  929. AllData.chartData1.yAxis2 = [];
  930. AllData.chartData1.yAxis2_Name = "";
  931. AllData.chartData1.yAxis3_line = [];
  932. AllData.chartData1.yAxis3_line_Name = "";
  933. AllData.chartData1.yAxis4_line = null;
  934. AllData.chartData1.yAxis4_line_Name = "";
  935. AllData.refresh1++;
  936. break;
  937. case "big_cover_small":
  938. AllData.chartData2.xAxis = [];
  939. AllData.chartData2.yAxis = [];
  940. AllData.chartData2.yAxis2 = [];
  941. AllData.refresh2++;
  942. break;
  943. case "mix":
  944. AllData.chartData3.xAxis = [];
  945. AllData.chartData3.yAxis = [];
  946. AllData.chartData3.yAxis_Name = "";
  947. AllData.chartData3.yAxis2 = [];
  948. AllData.chartData3.yAxis2_Name = "";
  949. AllData.chartData3.yAxis3_line = [];
  950. AllData.chartData3.yAxis3_line_Name = "";
  951. AllData.chartData3.yAxis4_line = null;
  952. AllData.chartData3.yAxis4_line_Name = "";
  953. AllData.refresh3++;
  954. break;
  955. }
  956. };
  957. // 清除风险分析echarts的数据
  958. const clearEchartsData2 = () => {
  959. if (AllData.TypeID == "sewage") {
  960. // 水质异常 - 污水
  961. AllData.chartData4.xAxis = [];
  962. AllData.chartData4.yAxis = [];
  963. AllData.chartData4.yAxis_Name = "";
  964. AllData.chartData4.yAxis2 = [];
  965. AllData.chartData4.yAxis2_Name = "出口水质";
  966. AllData.refresh4++;
  967. // 外水注入分析 - 污水
  968. AllData.chartData5.xData = [];
  969. AllData.chartData5.data1 = [];
  970. AllData.chartData5.data2 = [];
  971. AllData.refresh5++;
  972. // 淤堵风险分析 - 污水
  973. AllData.chartData6.xAxis = [];
  974. AllData.chartData6.yAxis = [];
  975. AllData.chartData6.yAxis_Name = "";
  976. AllData.chartData6.yAxis2 = [];
  977. AllData.chartData6.yAxis2_Name = "点位数";
  978. AllData.chartData6.yAxis3_line = [];
  979. AllData.chartData6.yAxis3_line_Name = "风险点位数";
  980. AllData.refresh6++;
  981. } else {
  982. // 管网风险 - 雨水
  983. AllData.chartData7.xAxis = [];
  984. AllData.chartData7.yAxis = [];
  985. AllData.chartData7.yAxis_Name = "溢流风险点";
  986. AllData.chartData7.yAxis2 = [];
  987. AllData.chartData7.yAxis2_Name = "点位数";
  988. AllData.chartData7.yAxis3_line = [];
  989. AllData.chartData7.yAxis3_line_Name = "管网满管运行点";
  990. AllData.chartData7.yAxis4_line = null;
  991. AllData.chartData7.yAxis4_line_Name = "";
  992. AllData.refresh7++;
  993. // 地下水渗入分析 - 雨水
  994. AllData.chartData8.xAxis = [];
  995. AllData.chartData8.yAxis = [];
  996. AllData.chartData8.yAxis2 = [];
  997. AllData.chartData8.yAxis_Name = "";
  998. AllData.chartData8.yAxis2_Name = "问题数";
  999. AllData.refresh8++;
  1000. // 污水注入分析 - 雨水
  1001. AllData.chartData6.xAxis = [];
  1002. AllData.chartData6.yAxis = [];
  1003. AllData.chartData6.yAxis_Name = "";
  1004. AllData.chartData6.yAxis2 = [];
  1005. AllData.chartData6.yAxis2_Name = "点位数";
  1006. AllData.chartData6.yAxis3_line = [];
  1007. AllData.chartData6.yAxis3_line_Name = "风险点位数";
  1008. AllData.refresh6++;
  1009. }
  1010. };
  1011. // 清除面包屑的数据
  1012. const clearMianBaoData = () => {
  1013. AllData.TitleName[1] = {
  1014. abbreviation: "",
  1015. Name: "",
  1016. id: "",
  1017. grade: "two",
  1018. sort: 1,
  1019. };
  1020. AllData.TitleName[2] = {
  1021. abbreviation: "",
  1022. Name: "",
  1023. id: "",
  1024. grade: "three",
  1025. sort: 2,
  1026. };
  1027. AllData.TitleName[3] = {
  1028. abbreviation: "",
  1029. Name: "",
  1030. id: "",
  1031. grade: "four",
  1032. sort: 3,
  1033. };
  1034. AllData.TitleName[4] = {
  1035. abbreviation: "",
  1036. Name: "",
  1037. id: "",
  1038. grade: "five",
  1039. sort: 4,
  1040. };
  1041. };
  1042. // 面包屑点击事件
  1043. const MBClick = (item) => {
  1044. console.log(item);
  1045. // 赋值需要进行echarts数据请求的数据
  1046. AllData.regionGrade = item.grade;
  1047. AllData.regionName = item.Name;
  1048.  
  1049. // 视角切换
  1050. if (item.sort == 0) {
  1051. // 回到默认图层
  1052. newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  1053. AllData.regionGrade = "one";
  1054. AllData.regionName = "";
  1055. AllData.TitleName[1] = {
  1056. abbreviation: "",
  1057. Name: "",
  1058. id: "",
  1059. grade: "two",
  1060. sort: 1,
  1061. };
  1062. AllData.TitleName[2] = {
  1063. abbreviation: "",
  1064. Name: "",
  1065. id: "",
  1066. grade: "three",
  1067. sort: 2,
  1068. };
  1069. AllData.TitleName[3] = {
  1070. abbreviation: "",
  1071. Name: "",
  1072. id: "",
  1073. grade: "four",
  1074. sort: 3,
  1075. };
  1076. AllData.TitleName[4] = {
  1077. abbreviation: "",
  1078. Name: "",
  1079. id: "",
  1080. grade: "five",
  1081. sort: 4,
  1082. };
  1083. }
  1084. if (item.sort == 1) {
  1085. bus.emit("panelDataToMap", {
  1086. name: item.abbreviation,
  1087. id: item.id,
  1088. });
  1089. AllData.TitleName[2] = {
  1090. abbreviation: "",
  1091. Name: "",
  1092. id: "",
  1093. grade: "three",
  1094. sort: 2,
  1095. };
  1096. AllData.TitleName[3] = {
  1097. abbreviation: "",
  1098. Name: "",
  1099. id: "",
  1100. grade: "four",
  1101. sort: 3,
  1102. };
  1103. AllData.TitleName[4] = {
  1104. abbreviation: "",
  1105. Name: "",
  1106. id: "",
  1107. grade: "five",
  1108. sort: 4,
  1109. };
  1110. }
  1111. if (item.sort == 2) {
  1112. bus.emit("panelDataToMap", {
  1113. name: item.abbreviation,
  1114. id: item.id,
  1115. });
  1116. AllData.TitleName[3] = {
  1117. abbreviation: "",
  1118. Name: "",
  1119. id: "",
  1120. grade: "four",
  1121. sort: 3,
  1122. };
  1123. AllData.TitleName[4] = {
  1124. abbreviation: "",
  1125. Name: "",
  1126. id: "",
  1127. grade: "five",
  1128. sort: 4,
  1129. };
  1130. }
  1131. if (item.sort == 3) {
  1132. bus.emit("panelDataToMap", {
  1133. name: item.abbreviation,
  1134. id: item.id,
  1135. });
  1136. AllData.TitleName[4] = {
  1137. abbreviation: "",
  1138. Name: "",
  1139. id: "",
  1140. grade: "five",
  1141. sort: 4,
  1142. };
  1143. }
  1144. // 切换时进行数据请求
  1145. if (AllData.ModularBtnActiveID == 1) {
  1146. // 本底缺陷
  1147. GetData("slope");
  1148. GetData("big_cover_small");
  1149. GetData("mix");
  1150. } else {
  1151. // 风险分析
  1152. GetData2();
  1153. }
  1154. };
  1155. // 打开弹窗
  1156. const openJXFXDialog = (item) => {
  1157. console.log(item);
  1158. console.log(AllData.Timers);
  1159. dialogConfig.visible = true;
  1160. dialogConfig.activeName = item.ClickData;
  1161. dialogConfig.lastFQName = item.name;
  1162. };
  1163. const handleClick = (tab, event) => {
  1164. console.log(tab, event);
  1165. };
  1166.  
  1167. onMounted(() => {
  1168. // 默认加载污水体系
  1169. let initeGLTimer = setInterval(() => {
  1170. if (!newfiberMap) return;
  1171. TypeClick(AllData.yw_type[0]);
  1172. bus.on("FenQuClick", FenQuClick);
  1173. bus.on("openJXFXDialog", openJXFXDialog);
  1174. clearInterval(initeGLTimer);
  1175. }, 100);
  1176. bus.on(mapInitBusName, () =>
  1177. TypeClick(AllData.yw_type.filter((i) => i.key == AllData.TypeID)[0])
  1178. );
  1179. });
  1180.  
  1181. onBeforeUnmount(() => {
  1182. const { setHighlight } = events_params;
  1183. AllData.yw_type.forEach((i) =>
  1184. i.value.split(",").forEach((o) => operationLayer(o, false))
  1185. );
  1186. bus.emit(setHighlight.key, []);
  1187. bus.off("FenQuClick");
  1188. bus.off("openJXFXDialog");
  1189. bus.off(mapInitBusName);
  1190. });
  1191. </script>
  1192. <style lang="scss" scoped>
  1193. .MonitoringAnalysis {
  1194. .TypeChangeBox {
  1195. left: 50%;
  1196. position: fixed;
  1197. top: 120px;
  1198. width: 300px;
  1199. height: 39px;
  1200. margin-left: -150px;
  1201. display: flex;
  1202. flex-direction: row;
  1203. flex-wrap: nowrap;
  1204. justify-content: space-between;
  1205. align-items: center;
  1206. z-index: 10;
  1207.  
  1208. .TypeBtn {
  1209. width: 138px;
  1210. height: 39px;
  1211. background: url("@/assets/images/pictureOnMap/JCFX/MoRen.png") no-repeat center;
  1212. float: left;
  1213. cursor: pointer;
  1214. .TypenName {
  1215. display: inline-block;
  1216. width: 138px;
  1217. height: 39px;
  1218. font-family: Source Han Sans CN;
  1219. font-weight: bold;
  1220. font-size: 16px;
  1221. color: #ffffff;
  1222. line-height: 36px;
  1223. text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
  1224. // background: linear-gradient(
  1225. // 180deg,
  1226. // rgba(49, 190, 255, 0.3) 0%,
  1227. // rgba(239, 252, 254, 1) 40%,
  1228. // rgba(239, 252, 254, 1) 100%
  1229. // );
  1230. // background-clip: text;
  1231. // -webkit-text-fill-color: transparent;
  1232. text-align: center;
  1233. }
  1234. }
  1235. .TypeBtnCheck {
  1236. background: url("@/assets/images/pictureOnMap/JCFX/XuanZhong.png") no-repeat center;
  1237. }
  1238. }
  1239. .CrumbesTitle {
  1240. width: 100%;
  1241. height: 44px;
  1242. background: url("@/assets/images/pictureOnMap/eachBgc.png") no-repeat center;
  1243. background-size: 100% 100%;
  1244. box-sizing: border-box;
  1245. padding-left: 40px;
  1246. display: flex;
  1247. flex-direction: row;
  1248. flex-wrap: nowrap;
  1249. justify-content: flex-start;
  1250. align-items: center;
  1251. .crumbs {
  1252. font-weight: bold;
  1253. font-size: 20px;
  1254. color: #ffffff;
  1255. cursor: pointer;
  1256. &:hover {
  1257. color: #2291e1;
  1258. }
  1259. }
  1260. }
  1261. .modular0 {
  1262. width: 100%;
  1263. height: 85px;
  1264. display: flex;
  1265. flex-direction: column;
  1266. flex-wrap: nowrap;
  1267. justify-content: center;
  1268. align-items: center;
  1269. .modularBtnBox {
  1270. width: 100%;
  1271. height: 50px;
  1272. display: flex;
  1273. flex-direction: row;
  1274. flex-wrap: nowrap;
  1275. justify-content: center;
  1276. align-items: center;
  1277.  
  1278. .modularBtn {
  1279. width: 140px;
  1280. height: 34px;
  1281. line-height: 34px;
  1282. background: linear-gradient(180deg, #0c2156 0%, #2291e1 100%);
  1283. text-align: center;
  1284. font-family: Source Han Sans CN;
  1285. font-weight: bold;
  1286. font-size: 16px;
  1287. color: #e0e5fa;
  1288. margin: 0 10px;
  1289. cursor: pointer;
  1290. border: 1px solid;
  1291. border-radius: 17px;
  1292. // border-radius: 17px;
  1293. border-color: #308fee;
  1294. }
  1295. .modularBtnActive {
  1296. background: linear-gradient(180deg, #0c3f57 0%, #1dd0c7 100%);
  1297. // border-radius: 17px;
  1298. color: #ffffff;
  1299. border-color: #31f0f2;
  1300. }
  1301. }
  1302. .modularTimerBox {
  1303. height: 32px;
  1304. line-height: 32px;
  1305. width: 80%;
  1306. text-align: center;
  1307. font-family: Source Han Sans CN;
  1308. font-weight: 500;
  1309. font-size: 14px;
  1310. color: #d2e2ff;
  1311. background: linear-gradient(0deg, #00134f 0%, #003065 100%);
  1312. position: relative;
  1313. border: 1px solid #163f80;
  1314. display: flex;
  1315. flex-direction: row;
  1316. flex-wrap: nowrap;
  1317. justify-content: center;
  1318. align-items: center;
  1319. cursor: pointer;
  1320. .modularTimerBoxLabel {
  1321. display: inline-block;
  1322. padding-left: 30px;
  1323. cursor: auto;
  1324. }
  1325.  
  1326. ::v-deep(.el-input__wrapper) {
  1327. background: linear-gradient(0deg, #00134f 0%, #003065 100%);
  1328. border: none;
  1329. box-shadow: none;
  1330. .el-input__icon {
  1331. color: white;
  1332. }
  1333. .el-range-input {
  1334. color: #2cb7ff;
  1335. }
  1336. .el-range-separator {
  1337. color: white;
  1338. }
  1339. }
  1340. &::after {
  1341. content: "";
  1342. position: absolute;
  1343. left: 249px;
  1344. top: -8px;
  1345. width: 0;
  1346. height: 0;
  1347. border-left: 6px solid transparent;
  1348. border-right: 6px solid transparent;
  1349. border-bottom: 8px solid #163f80;
  1350. }
  1351. }
  1352. }
  1353. .modular1,
  1354. .modular2,
  1355. .modular3 {
  1356. width: 100%;
  1357. height: calc((100% - 140px) / 3);
  1358.  
  1359. .modularBody {
  1360. width: 100%;
  1361. height: calc(100% - 50px);
  1362.  
  1363. .FontText {
  1364. width: 100%;
  1365. height: 20px;
  1366. line-height: 20px;
  1367. text-align: right;
  1368. color: rgb(110, 230, 230);
  1369. font-weight: 300;
  1370. font-size: 12px;
  1371. }
  1372. }
  1373. }
  1374. }
  1375. </style>
  1376. <style lang="scss">
  1377. .JCFXDialog {
  1378. background: #071645;
  1379.  
  1380. .el-dialog__header {
  1381. height: 44px;
  1382. width: 100%;
  1383. background: url("@/assets/images/pictureOnMap/JCFX/JCFXDialogHeader.png") no-repeat
  1384. center;
  1385. padding: 0 50px;
  1386. box-sizing: border-box;
  1387. margin: 0;
  1388. .el-dialog__title {
  1389. font-family: PangMenZhengDao;
  1390. font-weight: 400;
  1391. font-size: 24px;
  1392. color: #ffffff;
  1393. height: 44px;
  1394. line-height: 44px;
  1395. }
  1396. .el-dialog__headerbtn {
  1397. width: 44px;
  1398. height: 44px;
  1399. top: 3px;
  1400. right: 0;
  1401. .el-dialog__close {
  1402. font-size: 22px;
  1403. color: #7defff;
  1404. }
  1405. }
  1406. }
  1407. .el-dialog__body {
  1408. width: 100%;
  1409. height: calc(100% - 44px);
  1410.  
  1411. .el-tabs {
  1412. width: 100%;
  1413. height: 100%;
  1414. .el-tabs__item {
  1415. font-family: Source Han Sans CN;
  1416. font-weight: bold;
  1417. font-size: 16px;
  1418. color: #8fbffe;
  1419. width: 120px;
  1420. text-align: center;
  1421. padding: 0;
  1422. }
  1423. .is-active {
  1424. font-family: Source Han Sans CN;
  1425. font-weight: bold;
  1426. font-size: 16px;
  1427. color: #ffffff;
  1428. }
  1429. .el-tabs__nav-wrap::after {
  1430. content: "";
  1431. height: 1px;
  1432. background-color: #4389e1;
  1433. }
  1434. .el-tabs__active-bar {
  1435. height: 4px;
  1436. background: #2cb7ff;
  1437. }
  1438. .el-tabs__content {
  1439. width: 100%;
  1440. height: calc(100% - 55px);
  1441.  
  1442. .el-tab-pane {
  1443. width: 100%;
  1444. height: 100%;
  1445. }
  1446. }
  1447. }
  1448. }
  1449. }
  1450. </style>