Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / ylfxJCFX.vue
@ZZJ ZZJ on 4 Dec 11 KB 接驳口
  1. <template>
  2. <div id="ylfxJCFX">
  3. <div id="HeaderEcharts"></div>
  4. <el-divider>管网历史分析</el-divider>
  5. <div id="BodyFenXi">
  6. <div class="flex flex-justcontent-spacebetween">
  7. <div class="eachInfo">
  8. <div class="name">所属雨水分区:</div>
  9. <div class="text">{{ listData.rainArea }}</div>
  10. </div>
  11. <div class="eachInfo">
  12. <div class="name">运维片区:</div>
  13. <div class="text">{{ listData.watchAreaName }}</div>
  14. </div>
  15. </div>
  16. <div class="tableBox">
  17. <div class="name">历史经验:</div>
  18. <div class="text popUpTable">
  19. <el-table :data="listData.rainHistoryList" class="w100" stripe>
  20. <el-table-column prop="time" label="降雨日期" width="140px"> </el-table-column>
  21. <el-table-column prop="rain" label="日降雨量(mm)" />
  22. <el-table-column prop="jyjb" label="降雨级别">
  23. <template #default="scope">
  24. <div>
  25. {{ RainfallLevelFun(scope.row.rain) }}
  26. </div>
  27. </template>
  28. </el-table-column>
  29. <el-table-column prop="maxData" label="最大雨强(mm)" />
  30. <el-table-column prop="zdss" label="最大水深(cm)" />
  31. <el-table-column prop="cmd" label="充满度" />
  32. <el-table-column prop="warn" label="风险" />
  33. <el-table-column prop="duration" label="风险时长(分钟)" width="140px" />
  34. </el-table>
  35. </div>
  36. </div>
  37. <div class="eachInfo">
  38. <div class="name">周边环境分析:</div>
  39. <div class="text">{{ listData.zbhjfx }}</div>
  40. </div>
  41. </div>
  42. </div>
  43. </template>
  44.  
  45. <script setup name="ylfxJCFX">
  46. import { ref, reactive, toRefs, onMounted, nextTick } from 'vue';
  47. import * as echarts from 'echarts';
  48. import { drainageDispatchRainAnalysisByGwjcd, getEchart } from '@/api/MonitorAssetsOnMap';
  49. import moment from 'moment';
  50.  
  51. const props = defineProps({
  52. // 数据id
  53. dataID: {
  54. type: String,
  55. },
  56. dataCode: {
  57. type: String,
  58. },
  59. arrstcode: {
  60. type: Array,
  61. },
  62. arrid: {
  63. type: Array,
  64. },
  65. Getproperties: {
  66. type: Object,
  67. },
  68. });
  69.  
  70. const AllData = reactive({
  71. chart: null,
  72. yAxis: [],
  73. yAxis_Name: '降雨量',
  74. yAxis3: [],
  75. yAxis3_Name: '水深',
  76. xAxis: [],
  77. MGSW: 0,
  78. GSW: 0,
  79. MG: 0,
  80. YL: 0,
  81. });
  82. const Timers = ref([moment().subtract(3, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]);
  83. const init = () => {
  84. //先获取Dom上的实例
  85. let chartDom = echarts.getInstanceByDom(document.getElementById('HeaderEcharts'));
  86. //然后判断实例是否存在,如果不存在,就创建新实例
  87. if (chartDom == null) {
  88. chartDom = echarts.init(document.getElementById('HeaderEcharts'));
  89. var option = {
  90. tooltip: {
  91. trigger: 'axis',
  92. backgroundColor: '#004284',
  93. borderColor: '#0B9BFF',
  94. borderRadius: 6, // 设置圆角大小
  95. // 自定义提示框文本样
  96. textStyle: {
  97. // 字体颜色
  98. color: 'white',
  99. // 字体大小
  100. fontSize: 14,
  101. },
  102. },
  103. legend: {
  104. data: [AllData.yAxis_Name, AllData.yAxis3_Name],
  105. textStyle: {
  106. color: '#FFFFFF',
  107. fontSize: 12,
  108. },
  109. },
  110. grid: {
  111. left: 100,
  112. right: 100,
  113. bottom: 20,
  114. containLabel: true,
  115. },
  116.  
  117. xAxis: {
  118. type: 'category',
  119. boundaryGap: true,
  120. data: AllData.xAxis,
  121. axisLabel: {
  122. color: 'rgba(255,255,255,1)',
  123. fontSize: 12,
  124. fontFamily: 'AlibabaPuHuiTi',
  125. },
  126. },
  127.  
  128. dataZoom: [
  129. {
  130. // show: true,
  131. show: false,
  132. height: 4,
  133. bottom: 10,
  134. start: 0,
  135. end: 100,
  136. handleSize: '100%',
  137. fillerColor: '#94FA41',
  138. borderColor: 'transparent',
  139. backgroundColor: 'rgba(148, 250, 65, 0.2)',
  140. handleStyle: {
  141. color: '#94FA41',
  142. },
  143. moveHandleSize: 0,
  144. textStyle: {
  145. color: '#fff',
  146. },
  147. },
  148. {
  149. type: 'inside',
  150. show: true,
  151. height: 15,
  152. start: 0,
  153. end: 100,
  154. },
  155. ],
  156. yAxis: [
  157. {
  158. name: AllData.yAxis_Name,
  159. type: 'value',
  160. // minInterval: 1,
  161. axisLabel: {
  162. color: '#AAC1CF',
  163. show: true,
  164. formatter: function (value) {
  165. return value.toFixed(2); // 保留两位小数
  166. },
  167. },
  168. min: 0,
  169. nameTextStyle: {
  170. color: '#19D5FF',
  171. },
  172. splitLine: {
  173. lineStyle: {
  174. type: 'dashed',
  175. color: '#2161a8',
  176. },
  177. },
  178. alignTicks: true,
  179. position: 'left',
  180. inverse: true,
  181. nameLocation: 'start',
  182. },
  183. {
  184. name: AllData.yAxis3_Name,
  185. type: 'value',
  186. // minInterval: 1,
  187. max: function (value) {
  188. return value.max > AllData.YL ? value.max : AllData.YL;
  189. },
  190. min: 0,
  191. axisLabel: {
  192. color: '#AAC1CF',
  193. show: true,
  194. formatter: function (value) {
  195. return value.toFixed(2); // 保留两位小数
  196. },
  197. },
  198. nameTextStyle: {
  199. color: '#99FF55',
  200. },
  201. splitLine: {
  202. lineStyle: {
  203. type: 'dashed',
  204. color: '#2161a8',
  205. },
  206. },
  207. alignTicks: true,
  208. },
  209. ],
  210. series: [
  211. {
  212. name: AllData.yAxis_Name,
  213. type: 'bar',
  214. data: AllData.yAxis,
  215. barWidth: '30%', // 可以是具体像素值 '20px' 或百分比 '50%'
  216. // 修改数据点颜色
  217. itemStyle: {
  218. borderRadius: [0, 0, 50, 50],
  219. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  220. { offset: 0, color: '#08B1FF' },
  221. { offset: 1, color: '#19D6FF' },
  222. ]), // 数据点颜色
  223. },
  224. },
  225. {
  226. name: AllData.yAxis3_Name,
  227. type: 'line',
  228. data: AllData.yAxis3,
  229. yAxisIndex: 1,
  230. symbolSize: 7,
  231. // 修改折线颜色
  232. lineStyle: {
  233. color: '#99FF55', // 折线颜色
  234. width: 2, // 折线宽度
  235. },
  236. // 修改数据点颜色
  237. itemStyle: {
  238. color: '#99FF55', // 数据点颜色
  239. },
  240. // yAxisIndex: 1,
  241. markLine: {
  242. data: [],
  243. symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none',即不显示箭头
  244. },
  245. },
  246. ],
  247. };
  248. if (AllData.MGSW > 0) {
  249. option.series[1].markLine.data.push({
  250. yAxis: AllData.MGSW, // 这是水平线的 Y 轴值
  251. lineStyle: {
  252. type: 'dashed',
  253. color: 'red', // 线的颜色
  254. },
  255. label: {
  256. show: true,
  257. // formatter: "满管水位" + props.data.yAxis6_YJ,
  258. formatter: '溢流风险:' + AllData.MGSW,
  259. color: 'red',
  260. fontSize: 12,
  261. position: 'middle',
  262. },
  263. });
  264. }
  265. if (AllData.GSW > 0) {
  266. option.series[1].markLine.data.push({
  267. yAxis: AllData.GSW, // 这是水平线的 Y 轴值
  268. lineStyle: {
  269. type: 'dashed',
  270. color: 'yellow', // 线的颜色
  271. cap: 'round',
  272. },
  273. label: {
  274. show: true,
  275. formatter: '高水位:' + AllData.GSW,
  276. color: 'yellow',
  277. fontSize: 12,
  278. position: 'middle',
  279. },
  280. });
  281. }
  282. if (AllData.MG > 0) {
  283. option.series[1].markLine.data.push({
  284. yAxis: AllData.MG, // 这是水平线的 Y 轴值
  285. lineStyle: {
  286. type: 'dashed',
  287. color: 'rgba(255, 191, 0, 1)', // 线的颜色
  288. cap: 'round',
  289. },
  290. label: {
  291. show: true,
  292. formatter: '满管:' + AllData.MG,
  293. color: 'rgba(255, 191, 0, 1)',
  294. fontSize: 12,
  295. position: 'middle',
  296. },
  297. });
  298. }
  299. if (AllData.YL > 0) {
  300. option.series[1].markLine.data.push({
  301. yAxis: AllData.YL, // 这是水平线的 Y 轴值
  302. lineStyle: {
  303. type: 'dashed',
  304. color: '#610404', // 线的颜色
  305. cap: 'round',
  306. },
  307. label: {
  308. show: true,
  309. formatter: '溢流:' + AllData.YL,
  310. color: '#610404',
  311. fontSize: 12,
  312. position: 'middle',
  313. },
  314. });
  315. }
  316. option && chartDom.setOption(option, true);
  317. AllData.chart = chartDom;
  318. }
  319. };
  320. const resizeTheChart = () => {
  321. if (AllData.chart) {
  322. AllData.chart.resize();
  323. }
  324. };
  325. const getChartsData = () => {
  326. getEchart({
  327. stType: props.Getproperties.stType,
  328. stCode: props.Getproperties.stCode,
  329. dataCode: props.Getproperties.dataCode,
  330. start: Timers.value[0],
  331. end: Timers.value[1],
  332. }).then(res => {
  333. if (res && res.code == 200) {
  334. AllData.xAxis = res.data.times;
  335. res.data.datas.forEach(element => {
  336. switch (element.dataKey) {
  337. case 'z':
  338. AllData.yAxis3 = element.datas;
  339. element.cordonLineList.forEach(element => {
  340. if (element.code == 'ylfx') {
  341. AllData.MGSW = Number(element.lineValue);
  342. }
  343. if (element.code == 'gsw') {
  344. AllData.GSW = Number(element.lineValue);
  345. }
  346. if (element.code == 'mg') {
  347. AllData.MG = Number(element.lineValue);
  348. }
  349. if (element.code == 'yl') {
  350. AllData.YL = Number(element.lineValue);
  351. }
  352. });
  353. break;
  354.  
  355. case 'pn05':
  356. AllData.yAxis = element.datas;
  357. break;
  358. }
  359. });
  360. init();
  361. }
  362. });
  363. };
  364.  
  365. const listData = ref({});
  366. function gitDataFun() {
  367. let params = {
  368. id: props.Getproperties.id,
  369. };
  370. drainageDispatchRainAnalysisByGwjcd(params).then(
  371. res => {
  372. console.log('监测分析渍水风险降雨历史', res);
  373. if (res && res.code == 200) {
  374. listData.value = res.data;
  375. }
  376. },
  377. error => {}
  378. );
  379. }
  380. function RainfallLevelFun(rain) {
  381. let sum = Number(rain);
  382. let text = '';
  383. switch (true) {
  384. // 江河水位
  385. case sum > 200:
  386. text = '特大暴雨';
  387. break;
  388. case sum > 100:
  389. text = '大暴雨';
  390. break;
  391. case sum > 50:
  392. text = '暴雨';
  393. break;
  394. case sum > 25:
  395. text = '大雨';
  396. break;
  397. case sum > 10:
  398. text = '中雨';
  399. break;
  400. case sum > 0:
  401. text = '小雨';
  402. break;
  403. default:
  404. text = '无雨';
  405. }
  406. return text;
  407. }
  408. onMounted(() => {
  409. nextTick(() => {
  410. if (props.Getproperties.daterange) {
  411. Timers.value = props.Getproperties.daterange;
  412. }
  413. getChartsData();
  414. gitDataFun();
  415. window.addEventListener('resize', resizeTheChart);
  416. });
  417. });
  418. </script>
  419.  
  420. <style lang="scss" scoped>
  421. #ylfxJCFX {
  422. width: 100%;
  423. height: 100%;
  424. #HeaderEcharts {
  425. width: 1198px;
  426. height: 320px;
  427. }
  428. #BodyFenXi {
  429. width: 100%;
  430. height: 250px;
  431.  
  432. .eachInfo {
  433. display: flex;
  434. align-items: center;
  435. font-weight: bold;
  436. font-size: 14px;
  437. margin-bottom: 10px;
  438.  
  439. .name {
  440. color: #ccdfff;
  441. width: 100px;
  442. text-align: right;
  443. padding-right: 10px;
  444. }
  445. .text {
  446. flex: 1;
  447. min-width: 300px;
  448. min-height: 37px;
  449. color: #8fbffe;
  450. background: #0d2359;
  451. border-radius: 6px;
  452. border: 1px solid #0b9bff;
  453. padding: 7px 12px;
  454. }
  455. }
  456. .tableBox {
  457. display: flex;
  458. font-size: 14px;
  459. margin-bottom: 10px;
  460. color: #ccefff;
  461. .name {
  462. color: #ccdfff;
  463. min-width: 100px;
  464. text-align: right;
  465. padding-right: 10px;
  466. }
  467. .text {
  468. width: calc(100% - 100px);
  469. }
  470. :deep(.el-scrollbar__wrap) {
  471. max-height: 120px;
  472. overflow-y: auto;
  473. }
  474. }
  475. }
  476. }
  477. </style>