Newer
Older
KaiFengPC / src / views / spongePerformance / longTerm / assmessentCX.vue
@zhangdeliang zhangdeliang on 23 May 20 KB 初始化项目
  1. <template>
  2. <!-- 长效考核-长效考核总览 -->
  3. <div class="assmessentPageCX">
  4. <!-- 左侧内容 -->
  5. <div :class="['videoImgHM', ifExpand ? 'leftZkHM' : 'leftSqHM']" @click="ifExpand = !ifExpand"></div>
  6. <div :class="['assContentLeftHM', 'animate__animated', ifExpand ? 'animate__bounceInLeft' : 'animate__bounceOutLeft']">
  7. <div class="selectTitleHM">
  8. <div class="name">内涝防治情况</div>
  9. <div class="titleEnd">
  10. <el-select v-model="modalNL" placeholder="请选择" style="width: 80px" size="small" @change="changeMonitormodle">
  11. <el-option label="模型法" value="1" />
  12. <el-option label="监测法" value="2" />
  13. </el-select>
  14. <el-select
  15. v-model="yearmx"
  16. v-if="modalNL == '1'"
  17. @change="changeMonitorYear"
  18. placeholder="请选择"
  19. style="width: 100px; margin: 0 5px"
  20. size="small"
  21. >
  22. <el-option v-for="item in yearmodelList" :key="item.value" :label="item.label" :value="item.value" />
  23. </el-select>
  24. <el-select
  25. v-model="yearNL"
  26. @change="changeMonitorNlYear"
  27. v-if="modalNL == '2'"
  28. placeholder="请选择"
  29. style="width: 100px; margin: 0 5px"
  30. size="small"
  31. >
  32. <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
  33. </el-select>
  34. </div>
  35. </div>
  36. <!-- 模型法 -->
  37. <div v-if="modalNL == '1'">
  38. <div class="flex pipeSys">
  39. <p>设计降雨重现期:20年一遇24h</p>
  40. <p>设计降雨量:<span>156</span> mm</p>
  41. </div>
  42. <PieChart
  43. v-if="echartDatamdchart"
  44. :echartData="echartDatamd"
  45. :title="`总面积\n${yearmxrowareaTotal}k㎡`"
  46. class="chartHeight"
  47. ></PieChart>
  48. <div class="planCont modleplanCont" style="height: 230px">
  49. <div class="flex" v-for="item in resultList">
  50. <p class="title">{{ item.partitionName }}</p>
  51. <el-progress :text-inside="true" status="success" :stroke-width="20" :percentage="item.floodArea"></el-progress>
  52. </div>
  53. <!-- <div class="flex">
  54. <p class="title">长兴工业园雨水分区</p>
  55. <el-progress :text-inside="true" status="success" :stroke-width="20" :percentage="22"> </el-progress>
  56. </div> -->
  57. </div>
  58. </div>
  59. <!-- 监测法 -->
  60. <div v-if="modalNL == '2'">
  61. <div class="flex pipeSys">
  62. <p>累计降雨次数:<span>12</span></p>
  63. <p>24h最大降雨量:<span>156</span> mm</p>
  64. </div>
  65. <PieChart v-if="echartDatajcchart" :echartData="echartDataNL" :title="`建成区\n${areaData}k㎡`" class="chartHeight"></PieChart>
  66. <el-table :data="tableDataJC" height="260">
  67. <el-table-column label="内涝点名称" prop="name" />
  68. <el-table-column label="积水时长(h)" prop="yearTotalHour" />
  69. <el-table-column label="积水深度(m)" prop="yearMaxDepth" />
  70. </el-table>
  71. </div>
  72.  
  73. <div class="selectTitleHM" style="margin-top: 10px">
  74. <div class="name">近3年可渗透地面变化</div>
  75. </div>
  76. <div id="chartST" class="chartHeight chartSTleft"></div>
  77. </div>
  78.  
  79. <!-- 右侧内容 -->
  80. <div :class="['videoImgRCX', ifExpand2 ? 'rightZkCXHK' : 'rightSqCX']" @click="ifExpand2 = !ifExpand2"></div>
  81. <div :class="['assContentRightHM', 'animate__animated', ifExpand2 ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
  82. <div class="selectTitleHM">
  83. <div class="name">雨水资源利用量</div>
  84. <!-- <div class="titleEnd"><el-button type="success" size="small" @click="checkDetail(2)">详情</el-button></div> -->
  85. </div>
  86. <div id="chartRain" class="chartHeight"></div>
  87.  
  88. <div class="selectTitleHM">
  89. <div class="name">规划管控制度落实</div>
  90. <el-date-picker
  91. v-model="xmndDate"
  92. type="year"
  93. format="YYYY"
  94. value-format="YYYY"
  95. placeholder="选择年"
  96. @change="handlexmndDate"
  97. style="width: 120px"
  98. >
  99. </el-date-picker>
  100.  
  101. <!-- <el-select v-model="yearNL" placeholder="请选择" style="width: 100px; margin: 0 5px" size="small">
  102. <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
  103. </el-select> -->
  104.  
  105. <!-- <div class="titleEnd"><el-button type="success" size="small" @click="checkDetail(3)">详情</el-button></div> -->
  106. </div>
  107. <div class="planCont" v-loading="loadingGH">
  108. <div :class="['flex', activeIndex == 1 ? 'activePlan' : '']" @click="changeProject(1)">
  109. <p class="title">落实海绵项目指标项目数</p>
  110. <el-progress
  111. :text-inside="true"
  112. :stroke-width="20"
  113. :percentage="(ghgkObj.implementIndicatorsProjectNum / ghgkObj.permitsProjectNum) * 100"
  114. status="success"
  115. >
  116. <span class="name">{{ ghgkObj.implementIndicatorsProjectNum }}</span>
  117. </el-progress>
  118. <p class="title">完成规划审批项目数 {{ ghgkObj.permitsProjectNum }}个</p>
  119. </div>
  120. <div :class="['flex', activeIndex == 2 ? 'activePlan' : '']" @click="changeProject(2)">
  121. <p class="title">落实设计审查要求项目数</p>
  122. <el-progress
  123. :text-inside="true"
  124. :stroke-width="20"
  125. :percentage="(ghgkObj.designStandardNum / ghgkObj.completionAcceptanceNum) * 100"
  126. status="success"
  127. >
  128. <span class="name">{{ ghgkObj.designStandardNum }}</span>
  129. </el-progress>
  130. <p class="title">完成设计审查项目数 {{ ghgkObj.completionAcceptanceNum }}个</p>
  131. </div>
  132. <div :class="['flex', activeIndex == 3 ? 'activePlan' : '']" @click="changeProject(3)">
  133. <p class="title">通过竣工验收项目数</p>
  134. <el-progress
  135. :text-inside="true"
  136. :stroke-width="20"
  137. :percentage="(ghgkObj.inGoodConditionNum / ghgkObj.completionAcceptanceNum) * 100"
  138. status="success"
  139. >
  140. <span class="name">{{ ghgkObj.inGoodConditionNum }}</span>
  141. </el-progress>
  142. <p class="title">申报竣工验收项目数 {{ ghgkObj.completionAcceptanceNum }}个</p>
  143. </div>
  144. </div>
  145.  
  146. <div class="selectTitleHM">
  147. <div class="name">合流制溢流污染</div>
  148. <el-date-picker
  149. v-model="xmtjDate"
  150. type="year"
  151. placeholder="选择年"
  152. format="YYYY"
  153. value-format="YYYY"
  154. @change="handlexmtjDate"
  155. style="width: 120px"
  156. >
  157. </el-date-picker>
  158. <!-- <el-select v-model="yearNL" placeholder="请选择" style="width: 100px; margin: 0 5px" size="small">
  159. <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
  160. </el-select> -->
  161. </div>
  162. <PieChart :echartData="echartDataPie" :title="pieTitle" class="PieCharthel" v-if="shallowIf"></PieChart>
  163. </div>
  164.  
  165. <!-- 雨水利用量图例图片 -->
  166. <img src="@/assets/images/longTerm/yszy.png" alt="" :class="['tuliImg', ifExpand2 ? '' : 'tuliR']" v-if="tuliShow" />
  167. <!-- 规划管控图例图片 -->
  168. <img src="@/assets/images/longTerm/ghgk.png" alt="" :class="['tuliImg', ifExpand2 ? '' : 'tuliR']" v-if="!tuliShow" />
  169.  
  170. <!-- 详情弹窗内容 -->
  171. <!-- <el-dialog v-model="dialogShow" :title="dialogTitle" width="800px" append-to-body>
  172. <AssmessDetail :detailObj="detailObj" v-if="dialogShow"></AssmessDetail>
  173. </el-dialog> -->
  174. </div>
  175. <MapBox :initJson="`/static/libs/mapbox/style/floodOneMap.json`" @map-click="mapClick"></MapBox>
  176. </template>
  177. <script setup>
  178. import { permeableFloorAreaChart, rainwaterUtilizationChart, projectManageImplement, projectManageList } from '@/api/longTerm/index.js';
  179. import { getConfigKey } from '@/api/system/config'; //获取参数值
  180. import optionChart from './chartOption.js';
  181. import PieChart from '@/components/Echarts/pieChart.vue'; //饼图
  182. import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
  183. import YSFQ1 from '@/assets/geojson/YSFQ1.json';
  184. import YSFQLable1 from '@/assets/geojson/YSFQLable1.json';
  185. import bus from '@/bus';
  186. import { rainfallSiteCount } from '@/api/longTerm/index.js';
  187. // import AssmessDetail from './assmessDetail.vue'; //详情弹窗数据
  188. import { moduleFloodResultLongTerm, monitorEvaluateResultLongTerm } from '@/api/longTerm/index';
  189. import { ref } from 'vue';
  190. const { proxy } = getCurrentInstance();
  191. const xmndDate = ref(proxy.moment().subtract('1', 'day').format('YYYY'));
  192. const xmtjDate = ref(proxy.moment().subtract('1', 'day').format('YYYY'));
  193. const dialogShow = ref(false);
  194. const dialogTitle = ref('');
  195. const detailObj = ref({ type: '', id: '', year: '', tableData: [] });
  196. const ifExpand = ref(true);
  197. const ifExpand2 = ref(true);
  198. const activeIndex = ref(1);
  199. const timer = ref(null);
  200. const modletableData = ref([]); //模型data值
  201. const yearmodelList = ref([]);
  202. const yearmxrow = ref('');
  203. const yearmxrowareaTotal = ref('');
  204. const resultList = ref([]);
  205. const echartDatamd = ref([]);
  206. const echartDatamdchart = ref(false);
  207. const shallowIf = ref(false);
  208. //内涝
  209. const dataListNL = ref([]);
  210. const echartDatajcchart = ref(false);
  211. const echartDataPie = ref([
  212. { name: '>=5次', value: 12 },
  213. { name: '未发生', value: 2 },
  214. { name: '1-2次', value: 1 },
  215. { name: '3-5次', value: 3 },
  216. ]);
  217. const echartDataNL = ref([
  218. { name: '内涝区域', value: 2 },
  219. { name: '未发生内涝', value: 22 },
  220. ]);
  221.  
  222. const pieTitle = ref('监测点 80个');
  223. const chartKst = shallowRef(null);
  224. const chartRain = shallowRef(null);
  225. const chartNL = shallowRef(null);
  226. const yearmx = ref('2024');
  227. const yearNL = ref('2024');
  228. const modalNL = ref('1');
  229. const yearList = ref([]);
  230. const currentYear = ref(null);
  231. const centerTitle = ref('雨水资源利用');
  232. const tuliShow = ref(true);
  233. const ghgkObj = ref({}); //规划管控落实情况
  234. const loadingGH = ref(false);
  235. const areaData = ref('');
  236. const tableDataJC = ref([]);
  237. //点击年份加载数据
  238. const handlexmndDate = () => {
  239. getGhgk(xmndDate.value);
  240. };
  241. // 可渗透地面变化echarts
  242. function kstChart() {
  243. chartKst.value = proxy.echarts.init(document.getElementById('chartST'));
  244. permeableFloorAreaChart().then(res => {
  245. let datas = res.data;
  246. optionChart.option1.xAxis.data = datas.years;
  247. optionChart.option1.series[0].data = datas.permeableFloorAreaTotals;
  248. optionChart.option1.series[1].data = datas.permeableFloorAreaPercents;
  249. optionChart.option1.graphic.invisible = true; // 暂无数据
  250. chartKst.value.clear();
  251. chartKst.value.setOption(optionChart.option1);
  252. });
  253. }
  254. // 雨水资源利用量图表
  255. function getRainData() {
  256. centerTitle.value = '雨水资源利用';
  257. tuliShow.value = true;
  258. chartRain.value = proxy.echarts.init(document.getElementById('chartRain'));
  259. rainwaterUtilizationChart().then(res => {
  260. let datas = res.data;
  261. let charts = JSON.parse(JSON.stringify(optionChart.option3));
  262. charts.graphic.invisible = true; // 暂无数据
  263. charts.yAxis.name = 't';
  264. charts.series[0].name = '雨水资源利用量';
  265. charts.series[0].data = datas.rainwaterUtilizationTotals;
  266. charts.xAxis.data = datas.years;
  267. chartRain.value.clear();
  268. chartRain.value.setOption(charts);
  269. chartRain.value.getZr().setCursorStyle('pointer');
  270. chartRain.value.getZr().on('click', params => {
  271. centerTitle.value = '雨水资源利用';
  272. tuliShow.value = true;
  273. });
  274. });
  275. }
  276. // 内涝防治情况
  277. function getNLData() {}
  278. // 获取规划管控制度落实情况
  279. function getGhgk() {
  280. loadingGH.value = true;
  281. projectManageImplement({ year: xmndDate.value }).then(res => {
  282. ghgkObj.value = res.data;
  283. changeProject(1);
  284. loadingGH.value = false;
  285. });
  286. }
  287. /**
  288. * 规划管控落实制度点击
  289. * @param {*}val 1 规划许可,2 施工许可,3 竣工验收
  290. */
  291. function changeProject(val) {
  292. activeIndex.value = val;
  293. if (val == 1) {
  294. // 落实规划管控指标
  295. detailObj.value.tableData = ghgkObj.value.implementIndicatorsProjectList;
  296. } else if (val == 2) {
  297. // 落实设计审查要求
  298. detailObj.value.tableData = ghgkObj.value.designStandardList;
  299. } else {
  300. // 通过竣工验收
  301. detailObj.value.tableData = ghgkObj.value.inGoodConditionList;
  302. }
  303. }
  304.  
  305. // 查看详情
  306. function checkDetail(type) {
  307. dialogShow.value = true;
  308. detailObj.value.type = type;
  309. switch (type) {
  310. case 1:
  311. dialogTitle.value = currentYear.value + '可渗透地面变化详情';
  312. getDetailData();
  313. break;
  314. case 2:
  315. dialogTitle.value = currentYear.value + '年度雨水资源利用量详情';
  316. getDetailData();
  317. break;
  318. case 3:
  319. dialogTitle.value = currentYear.value + '年度规划管控制度落实详情';
  320. break;
  321. case 4:
  322. dialogTitle.value = currentYear.value + '年度合流制溢流污染详情';
  323. break;
  324. }
  325. }
  326.  
  327. // 获取可渗透地面变化、雨水资源利用详情
  328. function getDetailData() {
  329. projectManageList({ year: currentYear.value }).then(res => {
  330. detailObj.value.tableData = res.data;
  331. });
  332. }
  333.  
  334. // 获取建成区面积
  335. function getAreaData() {
  336. getConfigKey('jcq_area').then(res => {
  337. areaData.value = res.data || '0';
  338. });
  339. }
  340.  
  341. //点击年份加载数据
  342. const handlexmtjDate = () => {
  343. shallowIf.value = false;
  344. setTimeout(() => {
  345. getDatas(xmtjDate.value);
  346. }, 100);
  347. };
  348. // 溢流污染频次统计(饼图) 降雨溢流事件
  349. async function getDatas() {
  350. // 溢流污染频次统计
  351. let res1 = await rainfallSiteCount({ year: xmtjDate.value });
  352. if (res1 && res1.code == 200) {
  353. shallowIf.value = true;
  354. let datas = res1.data;
  355. pieTitle.value = '排口 ' + datas.drainOutletSiteNum;
  356. echartDataPie.value[0].value = datas.fiveOverflowNum;
  357. echartDataPie.value[1].value = datas.noOverflowNum;
  358. echartDataPie.value[2].value = datas.oneOverflowNum;
  359. echartDataPie.value[3].value = datas.threeOverflowNum;
  360. }
  361. }
  362.  
  363. //自适应
  364. function resizeTheChart() {
  365. chartKst.value.resize();
  366. chartRain.value.resize();
  367. chartNL.value.resize();
  368. }
  369. //切换模型法
  370. function changeMonitormodle(val) {
  371. if (val == 1) {
  372. getModalData();
  373. } else {
  374. getMonitorData();
  375. }
  376. }
  377.  
  378. // 获取监测法数据
  379. async function getMonitorData() {
  380. let res = await monitorEvaluateResultLongTerm();
  381. if (res && res.code == 200) {
  382. yearList.value = [];
  383. let datas = res.data;
  384. dataListNL.value = datas || [];
  385. if (datas.length == 0) return;
  386. datas.map(item => {
  387. yearList.value.push({
  388. value: item.year,
  389. label: item.year + '年',
  390. });
  391. });
  392. yearNL.value = dataListNL.value[0].year;
  393. tableDataJC.value = dataListNL.value[0].allWaterLoggingPointList;
  394. echartDataNL.value = [
  395. { name: '内涝区域', value: dataListNL.value[0].floodArea },
  396. { name: '未发生内涝', value: Number(areaData.value) - Number(dataListNL.value[0].floodArea) },
  397. ];
  398. setTimeout(() => {
  399. echartDatajcchart.value = true;
  400. });
  401. }
  402. }
  403. //检测法年份切换
  404. function changeMonitorNlYear(val) {
  405. echartDatajcchart.value = false;
  406. yearNL.value = val;
  407. let rows = dataListNL.value.filter(item => item.year == val);
  408. if (rows.length == 0) return;
  409. yearNL.value = rows[0].year;
  410. tableDataJC.value = rows[0].allWaterLoggingPointList;
  411. echartDataNL.value = [
  412. { name: '内涝区域', value: rows[0].floodArea },
  413. { name: '未发生内涝', value: Number(areaData.value) - Number(rows[0].floodArea) },
  414. ];
  415. setTimeout(() => {
  416. echartDatajcchart.value = true;
  417. }, 100);
  418. }
  419.  
  420. // 模型法年份切换
  421. function changeMonitorYear(val) {
  422. resultList.value = [];
  423. echartDatamdchart.value = false;
  424. yearmx.value = val;
  425. let rows = modletableData.value.filter(item => item.year == val);
  426.  
  427. if (rows.length == 0) return;
  428. resultList.value = rows[0].resultList;
  429. yearmxrow.value = rows[0];
  430. yearmxrowareaTotal.value = rows[0].areaTotal;
  431.  
  432. echartDatamd.value = [
  433. { name: '内涝区域', value: rows[0].totalFloodArea },
  434. { name: '未发生内涝', value: Number(rows[0].areaTotal) - Number(rows[0].totalFloodArea) },
  435. ];
  436. setTimeout(() => {
  437. echartDatamdchart.value = true;
  438. }, 100);
  439. }
  440.  
  441. // 模型法数据获取
  442. async function getModalData() {
  443. let res = await moduleFloodResultLongTerm();
  444. if (res && res.code == 200) {
  445. echartDatamd.value = [];
  446. modletableData.value = res.data;
  447. if (Boolean(modletableData.value.length)) {
  448. yearmodelList.value = [];
  449.  
  450. modletableData.value.forEach(i => {
  451. i.targetCxq = i.targetCxq + '年一遇24h';
  452. yearmodelList.value.push({
  453. value: i.year,
  454. label: i.year + '年',
  455. });
  456. });
  457. }
  458. yearmx.value = modletableData.value[0].year;
  459. yearmxrow.value = modletableData.value[0];
  460. resultList.value = modletableData.value[0].resultList;
  461. yearmxrowareaTotal.value = modletableData.value[0].areaTotal;
  462. echartDatamd.value = [
  463. { name: '内涝区域', value: modletableData.value[0].totalFloodArea },
  464. { name: '未发生内涝', value: Number(modletableData.value[0].areaTotal) - Number(modletableData.value[0].totalFloodArea) },
  465. ];
  466. setTimeout(() => {
  467. echartDatamdchart.value = true;
  468. });
  469. }
  470. }
  471.  
  472. onMounted(() => {
  473. getModalData();
  474. getGhgk();
  475. getDatas();
  476. // changeYear(new Date().getFullYear());
  477. kstChart(); //可渗透地面变化echarts
  478. getRainData(); //雨水资源利用量图表
  479. getNLData(); //内涝积水点图表
  480. getAreaData();
  481. window.addEventListener('resize', resizeTheChart);
  482. timer.value = setInterval(() => {
  483. if (!!!newfiberMapbox.map.getLayer('point')) {
  484. return;
  485. } else {
  486. !!!newfiberMapbox.map.getSource('YSFQ1') && newfiberMapbox.map.addSource('YSFQ1', { type: 'geojson', data: YSFQ1 });
  487. !!!newfiberMapbox.map.getLayer('YSFQ1') &&
  488. newfiberMapbox.map.addLayer({
  489. id: 'YSFQ1',
  490. type: 'fill',
  491. source: 'YSFQ1',
  492. minzoom: 0,
  493. maxzoom: 12,
  494. paint: {
  495. 'fill-color': ['get', 'fill_color'],
  496. },
  497. layout: {
  498. visibility: 'visible',
  499. },
  500. });
  501. !!!newfiberMapbox.map.getSource('YSFQLable1') && newfiberMapbox.map.addSource('YSFQLable1', { type: 'geojson', data: YSFQLable1 });
  502. !!!newfiberMapbox.map.getLayer('YSFQLable1') &&
  503. newfiberMapbox.map.addLayer({
  504. id: 'YSFQLable1',
  505. type: 'symbol',
  506. source: 'YSFQLable1',
  507. minzoom: 0,
  508. maxzoom: 12,
  509. layout: {
  510. visibility: 'visible',
  511. 'text-field': ['get', 'name'],
  512. 'text-font': ['KlokanTech Noto Sans Regular'],
  513. 'text-size': 16,
  514. 'text-line-height': 3,
  515. 'text-anchor': 'bottom',
  516. },
  517. paint: {
  518. 'text-color': '#ffffff',
  519. },
  520. });
  521. bus.emit('setLayerVisible', { layername: 'YSFQ', isCheck: true });
  522. clearInterval(timer.value);
  523. }
  524. }, 1000);
  525. });
  526. onBeforeUnmount(() => {
  527. window.removeEventListener('resize', resizeTheChart); //销毁图表监听事件
  528. //先销毁实例
  529. chartNL.value && chartNL.value.dispose();
  530. chartRain.value && chartRain.value.dispose();
  531. chartKst.value && chartKst.value.dispose();
  532. if (timer.value) {
  533. clearInterval(timer.value);
  534. }
  535. });
  536. </script>
  537. <style lang="scss" scoped>
  538. @import '@/assets/styles/variables.module.scss';
  539. .assmessentPageCX {
  540. width: 100%;
  541. height: 100%;
  542. .pipeSys {
  543. border: 1px solid #439bf8;
  544. border-radius: 6px;
  545. color: #2992ff;
  546. justify-content: space-between;
  547. align-items: center;
  548. padding: 3px 10px;
  549. margin: 10px auto;
  550. span {
  551. color: #fff;
  552. font-family: YouSheBiaoTiHei;
  553. font-size: 22px;
  554. }
  555. }
  556. .chartHeight {
  557. width: 100%;
  558. height: 210px !important;
  559. }
  560. .chartSTleft {
  561. width: 100%;
  562. height: calc(100% - 630px) !important;
  563. }
  564. .PieCharthel {
  565. height: calc(100% - 520px) !important;
  566. }
  567. #chartST {
  568. width: 100%;
  569. height: 230px;
  570. }
  571. .tuliImg {
  572. position: absolute;
  573. bottom: 20px;
  574. right: 480px;
  575. transition: 0.5s ease-in-out;
  576. }
  577. .tuliR {
  578. right: 20px !important;
  579. }
  580. .planCont {
  581. margin: 20px auto;
  582. .flex {
  583. margin-bottom: 10px;
  584. .title {
  585. width: 150px;
  586. }
  587. }
  588. }
  589. }
  590. .modleplanCont {
  591. overflow-y: auto;
  592. }
  593. </style>