Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / wszrfxJCFX.vue
@zhangqy zhangqy on 2 Dec 11 KB 优化时间
  1. <template>
  2. <div id="wszrfxJCFX">
  3. <div id="HeaderEcharts"></div>
  4. <el-divider>管网历史分析</el-divider>
  5. <div id="BodyFenXi">
  6. <div class="list1">
  7. <div class="listLabel">问题日期</div>
  8. <div class="listValue">{{ AllData.WTRQ }}</div>
  9. </div>
  10. <div class="list1">
  11. <div class="listLabel">天气情况</div>
  12. <div class="listValue">{{ AllData.TQ }}</div>
  13. </div>
  14. <div class="list2">
  15. <div class="listLabel">问题分析</div>
  16. <div class="listValue">
  17. <p>条件库:</p>
  18. {{ AllData.TJK }}
  19. <p>推论库:</p>
  20. {{ AllData.TLK }}
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. </template>
  26.  
  27. <script setup name="wszrfxJCFX">
  28. import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
  29. import * as echarts from "echarts";
  30. import { getEchart } from "@/api/MonitorAssetsOnMap";
  31. import { riskAnalysisReason } from "@/api/MonitoringAnalysis";
  32. import { rainCalendar } from "@/api/FloodControlAndDrainage";
  33.  
  34. import moment from "moment";
  35. const props = defineProps({
  36. // 数据id
  37. dataID: {
  38. type: String,
  39. },
  40. dataCode: {
  41. type: String,
  42. },
  43. arrstcode: {
  44. type: Array,
  45. },
  46. arrid: {
  47. type: Array,
  48. },
  49. Getproperties: {
  50. type: Object,
  51. },
  52. });
  53.  
  54. const AllData = reactive({
  55. chart: null,
  56. yAxis: [],
  57. yAxis_Name: "降雨量",
  58. yAxis2: [],
  59. yAxis2_Name: "流速",
  60. yAxis3: [],
  61. yAxis3_Name: "水深",
  62. yAxis4: [],
  63. yAxis4_Name: "电导率",
  64. xAxis: [],
  65. TJK: "",
  66. TLK: "",
  67. WTRQ: "",
  68. TQ: "",
  69. });
  70. const Timers = ref([
  71. moment().subtract(3, "day").format("YYYY-MM-DD HH:mm:ss"),
  72. moment().format("YYYY-MM-DD HH:mm:ss"),
  73. ]);
  74. const init = () => {
  75. //先获取Dom上的实例
  76. let chartDom = echarts.getInstanceByDom(document.getElementById("HeaderEcharts"));
  77. //然后判断实例是否存在,如果不存在,就创建新实例
  78. if (chartDom == null) {
  79. chartDom = echarts.init(document.getElementById("HeaderEcharts"));
  80. var option = {
  81. tooltip: {
  82. trigger: "axis",
  83. backgroundColor: "#004284",
  84. borderColor: "#0B9BFF",
  85. borderRadius: 6, // 设置圆角大小
  86. // 自定义提示框文本样
  87. textStyle: {
  88. // 字体颜色
  89. color: "white",
  90. // 字体大小
  91. fontSize: 14,
  92. },
  93. },
  94. legend: {
  95. data: [
  96. AllData.yAxis_Name,
  97. AllData.yAxis2_Name,
  98. AllData.yAxis3_Name,
  99. AllData.yAxis4_Name,
  100. ],
  101. textStyle: {
  102. color: "#FFFFFF",
  103. fontSize: 12,
  104. },
  105. },
  106. grid: {
  107. left: 60,
  108. right: 100,
  109. bottom: 20,
  110. containLabel: true,
  111. },
  112.  
  113. xAxis: {
  114. type: "category",
  115. boundaryGap: true,
  116. data: AllData.xAxis,
  117. axisLabel: {
  118. color: "rgba(255,255,255,1)",
  119. fontSize: 12,
  120. fontFamily: "AlibabaPuHuiTi",
  121. },
  122. },
  123. dataZoom: [
  124. {
  125. // show: true,
  126. show: false,
  127. height: 4,
  128. bottom: 10,
  129. start: 0,
  130. end: 100,
  131. handleSize: "100%",
  132. fillerColor: "#94FA41",
  133. borderColor: "transparent",
  134. backgroundColor: "rgba(148, 250, 65, 0.2)",
  135. handleStyle: {
  136. color: "#94FA41",
  137. },
  138. moveHandleSize: 0,
  139. textStyle: {
  140. color: "#fff",
  141. },
  142. },
  143. {
  144. type: "inside",
  145. show: true,
  146. height: 15,
  147. start: 0,
  148. end: 100,
  149. },
  150. ],
  151. yAxis: [
  152. {
  153. name: AllData.yAxis_Name,
  154. type: "value",
  155. // minInterval: 1,
  156. min: 0,
  157. axisLabel: {
  158. color: "#AAC1CF",
  159. show: true,
  160. formatter: function (value) {
  161. return value.toFixed(2); // 保留两位小数
  162. },
  163. },
  164. nameTextStyle: {
  165. color: "#19D5FF",
  166. },
  167. splitLine: {
  168. lineStyle: {
  169. type: "dashed",
  170. color: "#2161a8",
  171. },
  172. },
  173. alignTicks: true,
  174. position: "left",
  175. inverse: true,
  176. nameLocation: "start",
  177. offset: 60,
  178. },
  179. {
  180. name: AllData.yAxis2_Name,
  181. type: "value",
  182. // minInterval: 1,
  183. min: 0,
  184. axisLabel: {
  185. color: "#AAC1CF",
  186. show: true,
  187. formatter: function (value) {
  188. return value.toFixed(2); // 保留两位小数
  189. },
  190. },
  191. nameTextStyle: {
  192. color: "#55FFC5",
  193. },
  194. splitLine: {
  195. lineStyle: {
  196. type: "dashed",
  197. color: "#2161a8",
  198. },
  199. },
  200. alignTicks: true,
  201. position: "right",
  202. offset: 60,
  203. },
  204. {
  205. name: AllData.yAxis3_Name,
  206. type: "value",
  207. // minInterval: 1,
  208. min: 0,
  209. axisLabel: {
  210. color: "#AAC1CF",
  211. show: true,
  212. formatter: function (value) {
  213. return value.toFixed(2); // 保留两位小数
  214. },
  215. },
  216. nameTextStyle: {
  217. color: "#99FF55",
  218. },
  219. splitLine: {
  220. lineStyle: {
  221. type: "dashed",
  222. color: "#2161a8",
  223. },
  224. },
  225. alignTicks: true,
  226. offset: 0,
  227. },
  228.  
  229. {
  230. name: AllData.yAxis4_Name,
  231. type: "value",
  232. // minInterval: 1,
  233. min: 0,
  234. axisLabel: {
  235. color: "#AAC1CF",
  236. show: true,
  237. formatter: function (value) {
  238. return value.toFixed(2); // 保留两位小数
  239. },
  240. },
  241. nameTextStyle: {
  242. color: "#FFC155",
  243. },
  244. splitLine: {
  245. lineStyle: {
  246. type: "dashed",
  247. color: "#2161a8",
  248. },
  249. },
  250. alignTicks: true,
  251. position: "left",
  252. offset: 0,
  253. },
  254. ],
  255. series: [
  256. {
  257. name: AllData.yAxis_Name,
  258. type: "bar",
  259. data: AllData.yAxis,
  260. barWidth: "30%", // 可以是具体像素值 '20px' 或百分比 '50%'
  261. // 修改数据点颜色
  262. itemStyle: {
  263. borderRadius: [0, 0, 50, 50],
  264. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  265. { offset: 0, color: "#08B1FF" },
  266. { offset: 1, color: "#19D6FF" },
  267. ]), // 数据点颜色
  268. },
  269. },
  270. {
  271. name: AllData.yAxis2_Name,
  272. type: "line",
  273. data: AllData.yAxis2,
  274. yAxisIndex: 1,
  275. symbolSize: 7,
  276. // 修改折线颜色
  277. lineStyle: {
  278. color: "#55FFC5", // 折线颜色
  279. width: 2, // 折线宽度
  280. },
  281. // 修改数据点颜色
  282. itemStyle: {
  283. color: "#55FFC5", // 数据点颜色
  284. width: 4,
  285. },
  286. },
  287. {
  288. name: AllData.yAxis3_Name,
  289. type: "line",
  290. data: AllData.yAxis3,
  291. yAxisIndex: 2,
  292. // 修改折线颜色
  293. lineStyle: {
  294. color: "#99FF55", // 折线颜色
  295. width: 2, // 折线宽度
  296. },
  297. // 修改数据点颜色
  298. itemStyle: {
  299. color: "#99FF55", // 数据点颜色
  300. },
  301. },
  302. {
  303. name: AllData.yAxis4_Name,
  304. type: "line",
  305. data: AllData.yAxis4,
  306. yAxisIndex: 3,
  307. // 修改折线颜色
  308. lineStyle: {
  309. color: "#FFC155", // 折线颜色
  310. width: 2, // 折线宽度
  311. },
  312. // 修改数据点颜色
  313. itemStyle: {
  314. color: "#FFC155", // 数据点颜色
  315. },
  316. },
  317. ],
  318. };
  319. option && chartDom.setOption(option, true);
  320. AllData.chart = chartDom;
  321. }
  322. };
  323. const resizeTheChart = () => {
  324. if (AllData.chart) {
  325. AllData.chart.resize();
  326. }
  327. };
  328. const getChartsData = () => {
  329. getEchart({
  330. stType: props.Getproperties.stType,
  331. stCode: props.Getproperties.stCode,
  332. dataCode: props.Getproperties.dataCode,
  333. start: Timers.value[0],
  334. end: Timers.value[1],
  335. }).then((res) => {
  336. if (res && res.code == 200) {
  337. AllData.xAxis = res.data.times;
  338. res.data.datas.forEach((element) => {
  339. switch (element.dataKey) {
  340. case "cond":
  341. AllData.yAxis4 = element.datas;
  342. break;
  343. case "z":
  344. AllData.yAxis3 = element.datas;
  345. break;
  346. case "va":
  347. AllData.yAxis2 = element.datas;
  348. break;
  349. case "pn05":
  350. AllData.yAxis = element.datas;
  351. break;
  352. }
  353. });
  354. init();
  355. }
  356. });
  357. };
  358. const getFenXiData = () => {
  359. console.log(props);
  360.  
  361. riskAnalysisReason({
  362. startTime: Timers.value[0],
  363. endTime: Timers.value[1],
  364. stCode: props.Getproperties.stCode,
  365. dataCode: props.Getproperties.dataCode,
  366. menuType: "wszrfxJCFX",
  367. }).then((res) => {
  368. if (res && res.code == 200) {
  369. let A = 1;
  370. let AFont = "";
  371. let B = 1;
  372. let BFont = "";
  373. if (res.data.reasonList.length > 0) {
  374. res.data.reasonList.forEach((element) => {
  375. AFont += `${A}:${element},`;
  376. A++;
  377. });
  378. } else {
  379. AFont = "无";
  380. }
  381. // debugger;
  382. if (res.data.inferList.length > 0) {
  383. res.data.inferList.forEach((element) => {
  384. BFont += `${B}:${element},`;
  385. B++;
  386. });
  387. } else {
  388. BFont = "无";
  389. }
  390.  
  391. AllData.TJK = AFont;
  392. AllData.TLK = BFont;
  393. }
  394. });
  395. };
  396. const getWatherData = () => {
  397. AllData.WTRQ = moment(Timers.value[0]).format("YYYY-MM-DD");
  398. rainCalendar({
  399. queryTime: AllData.WTRQ,
  400. }).then((res) => {
  401. console.log(res);
  402. res.forEach((element) => {
  403. if (element.date == AllData.WTRQ) {
  404. AllData.TQ =
  405. element.value == 0
  406. ? element.weather
  407. : element.weather + "(" + element.value + "mm)";
  408. }
  409. });
  410. });
  411. };
  412. onMounted(() => {
  413. nextTick(() => {
  414. if (props.Getproperties.daterange) {
  415. Timers.value = props.Getproperties.daterange;
  416. }
  417. getChartsData();
  418. getFenXiData();
  419. getWatherData();
  420. window.addEventListener("resize", resizeTheChart);
  421. });
  422. });
  423. </script>
  424.  
  425. <style lang="scss" scoped>
  426. #wszrfxJCFX {
  427. width: 100%;
  428. height: 100%;
  429. #HeaderEcharts {
  430. width: 1198px;
  431. height: 320px;
  432. }
  433. #BodyFenXi {
  434. width: 100%;
  435. height: 250px;
  436. display: flex;
  437. flex-direction: row;
  438. flex-wrap: wrap;
  439. align-content: space-around;
  440. align-items: center;
  441.  
  442. .list1 {
  443. width: 50%;
  444. height: 60px;
  445. display: flex;
  446. flex-direction: row;
  447. flex-wrap: nowrap;
  448. align-content: center;
  449. align-items: center;
  450.  
  451. .listLabel {
  452. width: 200px;
  453. height: 40px;
  454. text-align: right;
  455. box-sizing: border-box;
  456. padding-right: 30px;
  457. line-height: 40px;
  458. color: #ccdfff;
  459. }
  460.  
  461. .listValue {
  462. width: 250px;
  463. height: 40px;
  464. line-height: 40px;
  465. box-sizing: border-box;
  466. padding: 0 5px;
  467. color: #8fbffe;
  468. background: #0d2359;
  469. border-radius: 5px;
  470. border: 1px solid #0b9bff;
  471. }
  472. }
  473.  
  474. .list2 {
  475. width: 100%;
  476. height: 190px;
  477. display: flex;
  478. flex-direction: row;
  479. flex-wrap: nowrap;
  480. align-content: center;
  481. align-items: center;
  482.  
  483. .listLabel {
  484. width: 200px;
  485. height: 170px;
  486. line-height: 170px;
  487. text-align: right;
  488. box-sizing: border-box;
  489. padding-right: 30px;
  490. color: #ccdfff;
  491. }
  492.  
  493. .listValue {
  494. width: 825px;
  495. height: 170px;
  496. box-sizing: border-box;
  497. padding: 5px;
  498. color: #8fbffe;
  499. background: #0d2359;
  500. border-radius: 5px;
  501. border: 1px solid #0b9bff;
  502. }
  503. }
  504. }
  505. }
  506. </style>