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